﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="keywords" content="CSS重定义" />
    <meta name="description" content="重新定义常用的CSS，对文本、图像、按钮、背景、表格等样式重新设置。" />
    <title>CSS,CSS重定义-拼图Pintuer</title>
    <link href="pintuer.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <script src="jquery.js"></script>
    <script src="pintuer.js"></script>
    <script src="plugins/respond.js"></script>
    <link type="image/x-icon" href="/favicon.ico" rel="shortcut icon" />
    <link href="/favicon.ico" rel="bookmark icon" />
</head>

<body>
    <div class="layout doc-header fixed">

        <div class="container doc-naver">
            <div class="line">
                <div class="xs3 xm3 xb3 doc-logo">
                    <button class="button icon-navicon margin-top float-right" data-target="#doc-header-pintuer">
						</button>
                    <a href="index.html">
                        <img src="images/logo.png" width="180" height="40" alt="拼图" class="ring-hover" />
                    </a>
                </div>
                <div class="xl12 xs9 xm9 xb9 doc-nav">
                    <ul class="nav nav-inline nav-navicon padding-small-top nav-menu" id="doc-header-pintuer">
                        <li><a href="index.html">起步</a> </li>
                        <li class="active"><a href="css.html">CSS</a> </li>
                        <li><a href="widgets.html">元件</a> </li>
                        <li><a href="javascript.html">JS组件</a> </li>
                        <li><a href="react.html">常用</a></li>
                        <li>
							<a href="react.html">其他工具<span class="arrow"></span></a>
							<ul class="drop-menu">
								<li><a href="tools/viewcode.html">代码预览工具</a></li>
								<li><a href="tools/setcolor.html">配色工具</a></li>
								<li><a href="tools/color.html">自定义颜色生成</a></li>
								<li><a href="http://www.box3.cn/">开发工具箱</a></li>
								<li><a href="https://tool.lu/">tool.lu工具箱</a></li>
							</ul>
							</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="bg-main doc-intro">
            <div class="container">
                <h1 class="fadein-top">
                    CSS重定义
                </h1>
                <p class="fadein-bottom">
                    重新定义常用的CSS，对文本、图像、按钮、背景、表格等样式重新设置。
                </p>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="line">
            <div class="xl12 xs12 xm9 xb9">
                <!--list.start-->
                <div class="doc-right">
                    <h2 class="doc-h2" id="overview">
                        概述
                    </h2>
                    <p class="doc-lead">
                        拼图跨屏响应式前端框架，针对常用的CSS基本重新定义，使其更符合实际应用，更适合中文的字符效果。
                    </p>
                    <h3 class="doc-h3" id="html5">
                        HTML5文档
                    </h3>
                    <p class="doc-readme">
                        拼图前端框架部份效果需要采用HTML5文档格式，使用拼图前端框架需要采用HTML5的文档类型：
                    </p>
                    <div class="doc-code">
                        <xmp>
                            <!DOCTYPE html>
                            <html lang="zh-cn">
                            ...

                            </html>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="mobile">
                        移动设备优先
                    </h3>
                    <p class="doc-readme">
                        拼图前端框架针对移动设备做了友好开发，使项目在移动设备上有良好的表现，及优秀的用户体验。
                    </p>
                    <div class="doc-input">
                        为了确保适当的绘制和触屏缩放，需要在

                        <head>
                            之中添加viewport元数据标签。
                    </div>
                    <div class="doc-code">
                        <xmp>
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        </xmp>
                    </div>
                    <div class="doc-input">
                        在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
                    </div>
                    <div class="doc-code">
                        <xmp>
                            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
                        </xmp>
                    </div>
                    <div class="doc-input">
                        当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari(ios7.0版本以后，safari上已看不到效果)
                    </div>
                    <div class="doc-code">
                        <xmp>
                            <meta content="yes" name="apple-mobile-web-app-capable">
                        </xmp>
                    </div>
                    <div class="doc-input">
                        将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式(可选default、black、black-translucent)
                    </div>
                    <div class="doc-code">
                        <xmp>
                            <meta content="black" name="apple-mobile-web-app-status-bar-style">
                        </xmp>
                    </div>
                    <div class="doc-input">
                        忽略将页面中的数字识别为电话号码
                    </div>
                    <div class="doc-code">
                        <xmp>
                            <meta content="telephone=no" name="format-detection">
                        </xmp>
                    </div>
                    <div class="doc-input">
                        忽略Android平台中对邮箱地址的识别
                    </div>
                    <div class="doc-code">
                        <xmp>
                            <meta content="email=no" name="format-detection">
                        </xmp>
                    </div>
                    <div class="doc-input">
                        预加载常用图片用来提高手机下的访问速度
                    </div>
                    <div class="doc-code">
                        <xmp>
                            <link rel="prefetch" href="预加载的图片" />
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="container">
                        容器
                    </h3>
                    <p class="doc-readme">
                        在拼图前端框架中，代码效果都包含在.container容器里。
                    </p>
                    <div class="doc-code">
                        <xmp>
                            <!DOCTYPE html>
                            <html lang="zh-cn">

                            <head>
                                ...
                            </head>

                            <body>
                                <div class="container">
                                    ...
                                </div>
                            </body>

                            </html>
                        </xmp>
                    </div>
                    <blockquote class="quote border-yellow doc-quoteyellow">
                        <strong>容器空间</strong> .container容器左右各含10px的内填充(padding)，如果需要宽度100%容器，请使用.layout样式。
                    </blockquote>
                    <blockquote class="quote border-green doc-quote">
                        <strong>容器大小</strong> 在不同屏幕大小，.container，具体表现为超小屏幕：自动；小屏幕：760px；中屏幕：1000px；大屏幕：1200px；当不需要限制容器宽度时，请使用.container-layout容器。
                    </blockquote>
                    <div class="doc-code">
                        <xmp>
                            <div class="layout">
                                ...
                            </div>
                            <div class="container-layout">
                                ...
                            </div>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="advise">
                        建议的文档模版
                    </h3>
                    <p class="doc-readme">
                        在项目中，对于初学者，我们建议采用此文档格式，同时也可以根据自己的需求修改代码。
                    </p>
                    <div class="doc-code">
                        <xmp>
                            <!DOCTYPE html>
                            <html lang="zh-cn">

                            <head>
                                <title>拼图前端框架HTML模版</title>
                                <meta name="keywords" content="关键词" />
                                <meta name="description" content="描述" />
                                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                <link rel="stylesheet" href="pintuer.css">
                                <link rel="stylesheet" href="your.css">
                                <script src="jquery.js"></script>
                                <script src="pintuer.js"></script>
                                <script src="respond.js"></script>
                                <script src="your.js"></script>
                            </head>

                            <body>
                                <div class="container">
                                    <h1>
                                        您好，欢迎使用拼图前端框架!
                                    </h1>
                                </div>
                            </body>

                            </html>
                        </xmp>
                    </div>
                    <blockquote class="quote border-green doc-quote">
                        <strong>自定义文件</strong> your.css及your.js为自定义文件，your.css应放在respond.js之前，不然在IE8下无法识别响应式样式。
                    </blockquote>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="text">
                        文本
                    </h2>
                    <p class="doc-lead">
                    </p>
                    <h3 class="doc-h3" id="title">
                        标题文本
                    </h3>
                    <p class="doc-readme">
                        HTML的标题文本，从h1到h6，同时也提供了.h1到.h6的样式。
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <h1>
                                h1. 拼图前端框架标题：24px
                            </h1>
                            <hr />
                            <h2>
                                h2. 拼图前端框架标题：20px
                            </h2>
                            <hr />
                            <h3>
                                h3. 拼图前端框架标题：18px
                            </h3>
                            <hr />
                            <h4>
                                h4. 拼图前端框架标题：16px
                            </h4>
                            <hr />
                            <h5>
                                h5. 拼图前端框架标题：14px
                            </h5>
                            <hr />
                            <h6>
                                h6. 拼图前端框架标题：12px
                            </h6>
                            <hr />
                            <code>
									code. 拼图前端框架标题：12px
								</code>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <h1>
                                h1. 拼图前端框架标题
                            </h1>
                            <h2>
                                h2. 拼图前端框架标题
                            </h2>
                            <h3>
                                h3. 拼图前端框架标题
                            </h3>
                            <h4>
                                h4. 拼图前端框架标题
                            </h4>
                            <h5>
                                h5. 拼图前端框架标题
                            </h5>
                            <h6>
                                h6. 拼图前端框架标题
                            </h6>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        副标题
                    </h4>
                    <div class="doc-input">
                        在标题内还可以包含small标签或.small样式，可以用来标记副标题，副文本为主文本字号的60%，当小于12px时显示为12px。
                    </div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <h1>
                                h1. 拼图前端框架标题 <small>副标题文本</small>
                            </h1>
                            <hr />
                            <h2>
                                h2. 拼图前端框架标题 <small>副标题文本</small>
                            </h2>
                            <hr />
                            <h3>
                                h3. 拼图前端框架标题 <small>副标题文本</small>
                            </h3>
                            <hr />
                            <h4>
                                h4. 拼图前端框架标题 <small>副标题文本</small>
                            </h4>
                            <hr />
                            <h5>
                                h5. 拼图前端框架标题 <small>副标题文本</small>
                            </h5>
                            <hr />
                            <h6>
                                h6. 拼图前端框架标题 <small>副标题文本</small>
                            </h6>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <h1>
                                h1. 拼图前端框架标题<small>副标题文本</small>
                            </h1>
                            <h2>
                                h2. 拼图前端框架标题<small>副标题文本</small>
                            </h2>
                            <h3>
                                h3. 拼图前端框架标题<small>副标题文本</small>
                            </h3>
                            <h4>
                                h4. 拼图前端框架标题<small>副标题文本</small>
                            </h4>
                            <h5>
                                h5. 拼图前端框架标题<small>副标题文本</small>
                            </h5>
                            <h6>
                                h6. 拼图前端框架标题<small>副标题文本</small>
                            </h6>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="p">
                        段落文本
                    </h3>
                    <p class="doc-readme">
                        拼图将全局的字体大小设置为14px，包含div,p,table等，段落文本包含在标签p之内，其他标签同时也可以用.p实现，同时段落文本还设置了15px的底部边距。
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <p>
                                拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。
                            </p>
                            <p>
                                拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
                            </p>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p>
                                ...
                            </p>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        文本缩进
                    </h4>
                    <div class="doc-input">
                        文本添加.text-indent样式，段落缩进2个字符。
                    </div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <p class="text-indent">
                                拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。
                            </p>
                            <p class="text-indent">
                                拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
                            </p>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p class="text-indent">
                                ...
                            </p>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="strong">
                        强调文本
                    </h3>
                    <p class="doc-readme">
                        包含加粗、斜体、下划线等效果。
                    </p>
                    <h4 class="doc-title">
                        强调文本
                    </h4>
                    <div class="doc-input">
                        也叫着重文本，用strong标签包含，font-weight样式实现，用于强调作用。
                    </div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            拼图框架<strong>加粗文本</strong>效果
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <strong>加粗文本</strong>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        斜体文本
                    </h4>
                    <div class="doc-input">
                        用斜体文本强调，包含在i标签之内。
                    </div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <i>拼图框架斜体文本</i>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <i>...</i>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="text-link">
                        链接文本
                    </h3>
                    <p class="doc-readme">
                        超级链接，包含在a标签内。
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <a href="#">链接文本：拼图框架</a>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <a href="#">链接文本：拼图框架</a>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="text-align">
                        文本对齐
                    </h3>
                    <p class="doc-readme">
                        包含左对齐，居中，右对齐等效果。
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <p class="text-left">
                                拼图框架左对齐
                            </p>
                            <p class="text-center">
                                拼图框架居中对齐
                            </p>
                            <p class="text-right">
                                拼图框架右对齐
                            </p>
                            <p class="text-justify">
                                拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
                            </p>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p class="text-left">
                                ...
                            </p>
                            <p class="text-center">
                                ...
                            </p>
                            <p class="text-right">
                                ...
                            </p>
                            <p class="text-justify">
                                ...
                            </p>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="text-size">
                        文本字号
                    </h3>
                    <p class="doc-readme">
                        文本字号由font-size设置，拼图框架把字号分为特大号、大号、普通、小号、特小号五个等级。
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="text-large">
                                特大号文本：拼图框架 <small>24px</small>
                            </div>
                            <hr />
                            <div class="text-big">
                                大号文本：拼图框架 <small>16px</small>
                            </div>
                            <hr />
                            <div class="text-default">
                                普通文本：拼图框架 <small>14px</small>
                            </div>
                            <hr />
                            <div class="text-small">
                                小号文本：拼图框架 <small>12px</small>
                            </div>
                            <hr />
                            <div class="text-little">
                                特小号文本：拼图框架 <small>10px</small>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="text-large">
                                ...
                            </div>
                            <div class="text-big">
                                ...
                            </div>
                            <div class="text-default">
                                ...
                            </div>
                            <div class="text-small">
                                ...
                            </div>
                            <div class="text-little">
                                ...
                            </div>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        small小号文本
                    </h4>
                    <div class="doc-input">
                        使用small标签或.text-small样式，可以设置成小号文本，大小为主文本的80%。
                    </div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            小号文本：<small>拼图框架</small>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <small>...</small>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="text-color">
                        文本颜色
                    </h3>
                    <p class="doc-readme">
                        可通过样式改变文本颜色，也可以应用于文本链接，网页配色色系，除默认的颜色外，建议根据实际应用来修改，上一章节已介绍自定义颜色修改方法。
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <p>
                                文本颜色：默认
                            </p>
                            <p class="text-main">
                                文本颜色：主色
                            </p>
                            <p class="text-sub">
                                文本颜色：辅色
                            </p>
                            <p class="text-back">
                                文本颜色：背景色
                            </p>
                            <p class="text-mix">
                                文本颜色：融合色
                            </p>
                            <p class="text-dot">
                                文本颜色：点缀色
                            </p>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p>
                                文本颜色：默认
                            </p>
                            <p class="text-main">
                                文本颜色：主色
                            </p>
                            <p class="text-sub">
                                文本颜色：辅色
                            </p>
                            <p class="text-back">
                                文本颜色：背景色
                            </p>
                            <p class="text-mix">
                                文本颜色：融合色
                            </p>
                            <p class="text-dot">
                                文本颜色：点缀色
                            </p>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        黑灰白
                    </h4>
                    <div class="doc-input">
                        无色色系，包含黑白灰三色，不建议改动，使用默认即可。
                    </div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <p class="text-black">
                                文本颜色：黑色
                            </p>
                            <p class="text-gray">
                                文本颜色：灰色
                            </p>
                            <div class="radius bg-main padding">
                                <p class="text-white" style="margin: 0;">
                                    文本颜色：白色
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p class="text-black">
                                文本颜色：黑色
                            </p>
                            <p class="text-gray">
                                文本颜色：灰色
                            </p>
                            <p class="text-white">
                                文本颜色：白色
                            </p>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        提示颜色
                    </h4>
                    <div class="doc-input">
                        包含红色、黄色、蓝色、绿色四种提示文字。
                    </div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <p class="text-red">
                                提示颜色：红色
                            </p>
                            <p class="text-yellow">
                                提示颜色：黄色
                            </p>
                            <p class="text-blue">
                                提示颜色：蓝色
                            </p>
                            <p class="text-green">
                                提示颜色：绿色
                            </p>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p class="text-red">
                                提示颜色：红色
                            </p>
                            <p class="text-yellow">
                                提示颜色：黄色
                            </p>
                            <p class="text-blue">
                                提示颜色：蓝色
                            </p>
                            <p class="text-green">
                                提示颜色：绿色
                            </p>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        柔和提示色
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <p class="text-red-light">
                                提示颜色：淡红
                            </p>
                            <p class="text-yellow-light">
                                提示颜色：淡黄
                            </p>
                            <p class="text-blue-light">
                                提示颜色：淡蓝
                            </p>
                            <p class="text-green-light">
                                提示颜色：淡绿
                            </p>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p class="text-red-light">
                                提示颜色：淡红
                            </p>
                            <p class="text-yellow-light">
                                提示颜色：淡黄
                            </p>
                            <p class="text-blue-light">
                                提示颜色：淡蓝
                            </p>
                            <p class="text-green-light">
                                提示颜色：淡绿
                            </p>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="text-height">
                        文本行距
                    </h3>
                    <p class="doc-readme">
                        文本行距分为超小行距16px(.height-little)、小行距20px(.height-small)、默认24px(.height)、大行距30px(.height-big)、超大行距40px(.height-large)。
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <strong>超小行距16px(.height-little)：</strong>
                            <p class="height-little">
                                拼图：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。
                            </p>
                            <strong>小行距20px(.height-small)：</strong>
                            <p class="height-small">
                                拼图前端框架在传统CSS框架的基本上，增加了HTML5、CSS3、JS等技术组合应用，应用最新的浏览器技术，同时兼容较早的浏览器，新旧结合，承前启后，开发者只需把框架文件引入到项目中，就可以初现快速的共同开发，改变以往建立PC网站同时，再建立手机网站的局面，实现一站响应所有设备，大大提高了开发效率。
                            </p>
                            <strong>默认24px(.height)：</strong>
                            <p class="height">
                                移动优先、跨屏响应：拼图以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应，兼容桌面浏览器的同时，更适应了移动互联网的潮流。
                            </p>
                            <strong>大行距30px(.height-big)：</strong>
                            <p class="height-big">
                                组件丰富、海量插件：拼图前端框架重新定义了CSS基础、常用元件及JS组件，可快速构架前端界面，实现跨屏响应。同时兼容所有jQuery插件，在项目中可以灵活使用，让前端开发如虎添翼。
                            </p>
                            <strong>超大行距40px(.height-large)：</strong>
                            <p class="height-large">
                                轻量高效、国产开源：拼图基于应用广泛jQuery插件，轻量高效；相对于国外的前端框架，拼图前端框架侧重于对中文的支持，符合国人的视觉及体验，实现到国内主流浏览器的支持，减少兼容性测试时间，提高开发效率。
                            </p>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p class="height-little">
                                ...
                            </p>
                            <p class="height-small">
                                ...
                            </p>
                            <p class="height">
                                ...
                            </p>
                            <p class="height-big">
                                ...
                            </p>
                            <p class="height-large">
                                ...
                            </p>
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h3 class="doc-h3" id="text-break">
                        文本换行<span class="tag bg-yellow">新增</span>
                    </h3>
                    <p class="doc-readme">
                        设置文字换行，.text-break 默认自动换行/.text-breakall 字母在单词内换行/.text-unbreak 强制不换行.
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <strong>宽度80%自动换行</strong>
                            <p class="text-break" style="width: 80%;border: 1px solid #009F95;">
                                拼图：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。
                            </p>
                            <strong>英文字母内换行</strong>
                            <p class="text-breakall" style="width: 80%;border: 1px solid #009F95;">
                                Jigsaw puzzle is excellent responsive front-end CSS open source framework, domestic front frame pioneer and leader, automatically adapt to the mobile phone, tablet, computer equipment, such as let the front-end development happy game, simple, flexible
                                and convenient.
                            </p>
                            <strong>强制不换行(注：<span class="text-red">浏览器中看到的并不是拼图BUG，可以做强制不换行演示，可能会影响到美观，望体谅。</span></strong>
                            <p class="text-unbreak" style="width: 80%;border: 1px solid #009F95;">
                                移动优先、跨屏响应：拼图以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应。
                            </p>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p class="text-break">
                                ...
                            </p>
                            <p class="text-breakall">
                                ...
                            </p>
                            <p class="text-unbreak">
                                ...
                            </p>
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h3 class="doc-h3" id="text-more">
                        文本截断<span class="tag bg-yellow">新增</span>
                    </h3>
                    <p class="doc-readme">
                        指定宽度后截断文本并用省略。
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <strong>截断文字(只能截断一行文字并出现省略号，此样式多用于文章标题)</strong>
                            <p class="text-more">
                                拼图：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。
                            </p>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p class="text-more">
                                ...
                            </p>
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="color">
                        颜色 <span class="tag bg-yellow">新增</span>
                    </h2>
                    <p class="doc-lead">
                    </p>
                    <h4 class="doc-title" id="color-default">默认颜色</h4>
                    <div class="doc-input">
                        拼图响应式前端CSS框架自带颜色。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <table id="table-color" border="0" cellspacing="0" cellpadding="0" class="table">
                                <tbody>
                                    <tr>
                                        <td height="60" align="center" colspan="5">
                                            <h2>拼图默认颜色表</h2>
                                        </td>
                                    </tr>
                                    <tr align="center">
                                        <td>
                                            <strong>颜&nbsp; &nbsp;色</strong>
                                        </td>
                                        <td>
                                            <strong>类&nbsp; &nbsp;名</strong>
                                        </td>
                                        <td>
                                            <strong>描&nbsp; &nbsp;述</strong>
                                        </td>
                                        <td>
                                            <strong>色值</strong>
                                        </td>
                                        <td>
                                            <strong>类&nbsp; &nbsp;型</strong>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#000" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            -
                                        </td>
                                        <td style="text-align:center;">
                                            默认/黑色
                                        </td>
                                        <td style="text-align:center;">
                                            #000
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#0a8" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-main/bg-main/border-main
                                        </td>
                                        <td style="text-align:center;">
                                            主色
                                        </td>
                                        <td style="text-align:center;">
                                            #0a8
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#0ae" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-sub/bg-sub/border-sub
                                        </td>
                                        <td style="text-align:center;">
                                            辅色
                                        </td>
                                        <td style="text-align:center;">
                                            #0ae
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#efe" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-back/bg-back/border-back
                                        </td>
                                        <td style="text-align:center;">
                                            背景色
                                        </td>
                                        <td style="text-align:center;">
                                            #efe
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#aed" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-mix/bg-mix/border-mix
                                        </td>
                                        <td style="text-align:center;">
                                            融合色
                                        </td>
                                        <td style="text-align:center;">
                                            #aed
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#e33" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-dot/bg-dot/border-dot
                                        </td>
                                        <td style="text-align:center;">
                                            点缀色
                                        </td>
                                        <td style="text-align:center;">
                                            #e33
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#000" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-black/bg-black/border-black
                                        </td>
                                        <td style="text-align:center;">
                                            黑色
                                        </td>
                                        <td style="text-align:center;">
                                            #000
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#999" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-gray/bg-gray/border-gray
                                        </td>
                                        <td style="text-align:center;">
                                            灰色
                                        </td>
                                        <td style="text-align:center;">
                                            #999
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#fff" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-white/bg-white/border-white
                                        </td>
                                        <td style="text-align:center;">
                                            白色
                                        </td>
                                        <td style="text-align:center;">
                                            #fff
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#e33" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-red/bg-red/border-red
                                        </td>
                                        <td style="text-align:center;">
                                            红色
                                        </td>
                                        <td style="text-align:center;">
                                            #e33
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#f60" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-yellow/bg-yellow/border-yellow
                                        </td>
                                        <td style="text-align:center;">
                                            黄色
                                        </td>
                                        <td style="text-align:center;">
                                            #f60
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#0ae" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-blue/bg-blue/border-blue
                                        </td>
                                        <td style="text-align:center;">
                                            蓝色
                                        </td>
                                        <td style="text-align:center;">
                                            #0ae
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#2c7" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-green/bg-green/border-green
                                        </td>
                                        <td style="text-align:center;">
                                            绿色
                                        </td>
                                        <td style="text-align:center;">
                                            #2c7
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#fcd" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-red-light/bg-red-light/border-red-light
                                        </td>
                                        <td style="text-align:center;">
                                            淡红
                                        </td>
                                        <td style="text-align:center;">
                                            #fcd
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#fec" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-yellow-light/bg-yellow-light/border-yellow-light
                                        </td>
                                        <td style="text-align:center;">
                                            淡黄
                                        </td>
                                        <td style="text-align:center;">
                                            #fec
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#def" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-blue-light/bg-blue-light/border-blue-light
                                        </td>
                                        <td style="text-align:center;">
                                            淡蓝
                                        </td>
                                        <td style="text-align:center;">
                                            #def
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ded" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            text-green-light/bg-green-light/border-green-light
                                        </td>
                                        <td style="text-align:center;">
                                            淡绿
                                        </td>
                                        <td style="text-align:center;">
                                            #ded
                                        </td>
                                        <td style="text-align:center;">
                                            文本色/背景色/边框色
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            ...
                        </xmp>
                    </div>
                    <h4 class="doc-title" id="color-table">自定义颜色</h4>
                    <div class="doc-input">
                        用户自行设定颜色，这里只提供颜色值表和自定义颜色命名规范。当然也可以使用：<a class="tag bg-yellow" href="tools/color.html" target="_blank">拼图自定义颜色生成工具</a>快速生成样式。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <table border="0" cellspacing="0" cellpadding="0" class="table">
                                <tbody>
                                    <tr>
                                        <td height="60" align="center" colspan="5">
                                            <h2>
                                                十六进制颜色表
                                            </h2>
                                        </td>
                                    </tr>
                                    <tr align="center">
                                        <td>
                                            <strong>颜&nbsp; &nbsp;色</strong>
                                        </td>
                                        <td>
                                            <strong>英文代码</strong>
                                        </td>
                                        <td>
                                            <strong>形象描述</strong>
                                        </td>
                                        <td>
                                            <strong>十六进制</strong>
                                        </td>
                                        <td>
                                            <strong>RGB</strong>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffb6c1" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LightPink
                                        </td>
                                        <td style="text-align:center;">
                                            浅粉红
                                        </td>
                                        <td style="text-align:center;">
                                            #FFB6C1
                                        </td>
                                        <td style="text-align:center;">
                                            255,182,193
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffc0cb" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Pink
                                        </td>
                                        <td style="text-align:center;">
                                            粉红
                                        </td>
                                        <td style="text-align:center;">
                                            #FFC0CB
                                        </td>
                                        <td style="text-align:center;">
                                            255,192,203
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#dc143c" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Crimson
                                        </td>
                                        <td style="text-align:center;">
                                            猩红
                                        </td>
                                        <td style="text-align:center;">
                                            #DC143C
                                        </td>
                                        <td style="text-align:center;">
                                            220,20,60
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#fff0f5" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LavenderBlush
                                        </td>
                                        <td style="text-align:center;">
                                            脸红的淡紫色
                                        </td>
                                        <td style="text-align:center;">
                                            #FFF0F5
                                        </td>
                                        <td style="text-align:center;">
                                            255,240,245
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#db7093" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            PaleVioletRed
                                        </td>
                                        <td style="text-align:center;">
                                            苍白的紫罗兰红色
                                        </td>
                                        <td style="text-align:center;">
                                            #DB7093
                                        </td>
                                        <td style="text-align:center;">
                                            219,112,147
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ff69b4" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            HotPink
                                        </td>
                                        <td style="text-align:center;">
                                            热情的粉红
                                        </td>
                                        <td style="text-align:center;">
                                            #FF69B4
                                        </td>
                                        <td style="text-align:center;">
                                            255,105,180
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ff1493" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DeepPink
                                        </td>
                                        <td style="text-align:center;">
                                            深粉色
                                        </td>
                                        <td style="text-align:center;">
                                            #FF1493
                                        </td>
                                        <td style="text-align:center;">
                                            255,20,147
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#c71585" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            MediumVioletRed
                                        </td>
                                        <td style="text-align:center;">
                                            适中的紫罗兰红色
                                        </td>
                                        <td style="text-align:center;">
                                            #C71585
                                        </td>
                                        <td style="text-align:center;">
                                            199,21,133
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#da70d6" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Orchid
                                        </td>
                                        <td style="text-align:center;">
                                            兰花的紫色
                                        </td>
                                        <td style="text-align:center;">
                                            #DA70D6
                                        </td>
                                        <td style="text-align:center;">
                                            218,112,214
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#d8bfd8" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Thistle
                                        </td>
                                        <td style="text-align:center;">
                                            蓟
                                        </td>
                                        <td style="text-align:center;">
                                            #D8BFD8
                                        </td>
                                        <td style="text-align:center;">
                                            216,191,216
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#dda0dd" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            plum
                                        </td>
                                        <td style="text-align:center;">
                                            李子
                                        </td>
                                        <td style="text-align:center;">
                                            #DDA0DD
                                        </td>
                                        <td style="text-align:center;">
                                            221,160,221
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ee82ee" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Violet
                                        </td>
                                        <td style="text-align:center;">
                                            紫罗兰
                                        </td>
                                        <td style="text-align:center;">
                                            #EE82EE
                                        </td>
                                        <td style="text-align:center;">
                                            238,130,238
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ff00ff" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Magenta
                                        </td>
                                        <td style="text-align:center;">
                                            洋红
                                        </td>
                                        <td style="text-align:center;">
                                            #FF00FF
                                        </td>
                                        <td style="text-align:center;">
                                            255,0,255
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ff00ff" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Fuchsia
                                        </td>
                                        <td style="text-align:center;">
                                            灯笼海棠(紫红色)
                                        </td>
                                        <td style="text-align:center;">
                                            #FF00FF
                                        </td>
                                        <td style="text-align:center;">
                                            255,0,255
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#8b008b" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkMagenta
                                        </td>
                                        <td style="text-align:center;">
                                            深洋红色
                                        </td>
                                        <td style="text-align:center;">
                                            #8B008B
                                        </td>
                                        <td style="text-align:center;">
                                            139,0,139
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#800080" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Purple
                                        </td>
                                        <td style="text-align:center;">
                                            紫色
                                        </td>
                                        <td style="text-align:center;">
                                            #800080
                                        </td>
                                        <td style="text-align:center;">
                                            128,0,128
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ba55d3" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            MediumOrchid
                                        </td>
                                        <td style="text-align:center;">
                                            适中的兰花紫
                                        </td>
                                        <td style="text-align:center;">
                                            #BA55D3
                                        </td>
                                        <td style="text-align:center;">
                                            186,85,211
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#da00e0" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkVoilet
                                        </td>
                                        <td style="text-align:center;">
                                            深紫罗兰色
                                        </td>
                                        <td style="text-align:center;">
                                            #9400D3
                                        </td>
                                        <td style="text-align:center;">
                                            148,0,211
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#9932cc" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkOrchid
                                        </td>
                                        <td style="text-align:center;">
                                            深兰花紫
                                        </td>
                                        <td style="text-align:center;">
                                            #9932CC
                                        </td>
                                        <td style="text-align:center;">
                                            153,50,204
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#4b0082" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Indigo
                                        </td>
                                        <td style="text-align:center;">
                                            靛青
                                        </td>
                                        <td style="text-align:center;">
                                            #4B0082
                                        </td>
                                        <td style="text-align:center;">
                                            75,0,130
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#8a2be2" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            BlueViolet
                                        </td>
                                        <td style="text-align:center;">
                                            深紫罗兰的蓝色
                                        </td>
                                        <td style="text-align:center;">
                                            #8A2BE2
                                        </td>
                                        <td style="text-align:center;">
                                            138,43,226
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#9370db" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            MediumPurple
                                        </td>
                                        <td style="text-align:center;">
                                            适中的紫色
                                        </td>
                                        <td style="text-align:center;">
                                            #9370DB
                                        </td>
                                        <td style="text-align:center;">
                                            147,112,219
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#7b68ee" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            MediumSlateBlue
                                        </td>
                                        <td style="text-align:center;">
                                            适中的板岩暗蓝灰色
                                        </td>
                                        <td style="text-align:center;">
                                            #7B68EE
                                        </td>
                                        <td style="text-align:center;">
                                            123,104,238
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#6a5acd" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            SlateBlue
                                        </td>
                                        <td style="text-align:center;">
                                            板岩暗蓝灰色
                                        </td>
                                        <td style="text-align:center;">
                                            #6A5ACD
                                        </td>
                                        <td style="text-align:center;">
                                            106,90,205
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#483d8b" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkSlateBlue
                                        </td>
                                        <td style="text-align:center;">
                                            深岩暗蓝灰色
                                        </td>
                                        <td style="text-align:center;">
                                            #483D8B
                                        </td>
                                        <td style="text-align:center;">
                                            72,61,139
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#e6e6fa" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Lavender
                                        </td>
                                        <td style="text-align:center;">
                                            熏衣草花的淡紫色
                                        </td>
                                        <td style="text-align:center;">
                                            #E6E6FA
                                        </td>
                                        <td style="text-align:center;">
                                            230,230,250
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#f8f8ff" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            GhostWhite
                                        </td>
                                        <td style="text-align:center;">
                                            幽灵的白色
                                        </td>
                                        <td style="text-align:center;">
                                            #F8F8FF
                                        </td>
                                        <td style="text-align:center;">
                                            248,248,255
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#0000ff" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Blue
                                        </td>
                                        <td style="text-align:center;">
                                            纯蓝
                                        </td>
                                        <td style="text-align:center;">
                                            #0000FF
                                        </td>
                                        <td style="text-align:center;">
                                            0,0,255
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#0000cd" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            MediumBlue
                                        </td>
                                        <td style="text-align:center;">
                                            适中的蓝色
                                        </td>
                                        <td style="text-align:center;">
                                            #0000CD
                                        </td>
                                        <td style="text-align:center;">
                                            0,0,205
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#191970" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            MidnightBlue
                                        </td>
                                        <td style="text-align:center;">
                                            午夜的蓝色
                                        </td>
                                        <td style="text-align:center;">
                                            #191970
                                        </td>
                                        <td style="text-align:center;">
                                            25,25,112
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#00008b" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkBlue
                                        </td>
                                        <td style="text-align:center;">
                                            深蓝色
                                        </td>
                                        <td style="text-align:center;">
                                            #00008B
                                        </td>
                                        <td style="text-align:center;">
                                            0,0,139
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#000080" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Navy
                                        </td>
                                        <td style="text-align:center;">
                                            海军蓝
                                        </td>
                                        <td style="text-align:center;">
                                            #000080
                                        </td>
                                        <td style="text-align:center;">
                                            0,0,128
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#4169e1" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            RoyalBlue
                                        </td>
                                        <td style="text-align:center;">
                                            皇军蓝
                                        </td>
                                        <td style="text-align:center;">
                                            #4169E1
                                        </td>
                                        <td style="text-align:center;">
                                            65,105,225
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#6495ed" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            CornflowerBlue
                                        </td>
                                        <td style="text-align:center;">
                                            矢车菊的蓝色
                                        </td>
                                        <td style="text-align:center;">
                                            #6495ED
                                        </td>
                                        <td style="text-align:center;">
                                            100,149,237
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#b0c4de" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LightSteelBlue
                                        </td>
                                        <td style="text-align:center;">
                                            淡钢蓝
                                        </td>
                                        <td style="text-align:center;">
                                            #B0C4DE
                                        </td>
                                        <td style="text-align:center;">
                                            176,196,222
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#778899" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LightSlateGray
                                        </td>
                                        <td style="text-align:center;">
                                            浅石板灰
                                        </td>
                                        <td style="text-align:center;">
                                            #778899
                                        </td>
                                        <td style="text-align:center;">
                                            119,136,153
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#708090" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            SlateGray
                                        </td>
                                        <td style="text-align:center;">
                                            石板灰
                                        </td>
                                        <td style="text-align:center;">
                                            #708090
                                        </td>
                                        <td style="text-align:center;">
                                            112,128,144
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#d0e000" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DoderBlue
                                        </td>
                                        <td style="text-align:center;">
                                            道奇蓝
                                        </td>
                                        <td style="text-align:center;">
                                            #1E90FF
                                        </td>
                                        <td style="text-align:center;">
                                            30,144,255
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#f0f8ff" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            AliceBlue
                                        </td>
                                        <td style="text-align:center;">
                                            爱丽丝蓝
                                        </td>
                                        <td style="text-align:center;">
                                            #F0F8FF
                                        </td>
                                        <td style="text-align:center;">
                                            240,248,255
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#4682b4" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            SteelBlue
                                        </td>
                                        <td style="text-align:center;">
                                            钢蓝
                                        </td>
                                        <td style="text-align:center;">
                                            #4682B4
                                        </td>
                                        <td style="text-align:center;">
                                            70,130,180
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#87cefa" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LightSkyBlue
                                        </td>
                                        <td style="text-align:center;">
                                            淡蓝色
                                        </td>
                                        <td style="text-align:center;">
                                            #87CEFA
                                        </td>
                                        <td style="text-align:center;">
                                            135,206,250
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#87ceeb" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            SkyBlue
                                        </td>
                                        <td style="text-align:center;">
                                            天蓝色
                                        </td>
                                        <td style="text-align:center;">
                                            #87CEEB
                                        </td>
                                        <td style="text-align:center;">
                                            135,206,235
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#00bfff" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DeepSkyBlue
                                        </td>
                                        <td style="text-align:center;">
                                            深天蓝
                                        </td>
                                        <td style="text-align:center;">
                                            #00BFFF
                                        </td>
                                        <td style="text-align:center;">
                                            0,191,255
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#add8e6" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LightBLue
                                        </td>
                                        <td style="text-align:center;">
                                            淡蓝
                                        </td>
                                        <td style="text-align:center;">
                                            #ADD8E6
                                        </td>
                                        <td style="text-align:center;">
                                            173,216,230
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#b0e0e6" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            PowDerBlue
                                        </td>
                                        <td style="text-align:center;">
                                            火药蓝
                                        </td>
                                        <td style="text-align:center;">
                                            #B0E0E6
                                        </td>
                                        <td style="text-align:center;">
                                            176,224,230
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#5f9ea0" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            CadetBlue
                                        </td>
                                        <td style="text-align:center;">
                                            军校蓝
                                        </td>
                                        <td style="text-align:center;">
                                            #5F9EA0
                                        </td>
                                        <td style="text-align:center;">
                                            95,158,160
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#f0ffff" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Azure
                                        </td>
                                        <td style="text-align:center;">
                                            蔚蓝色
                                        </td>
                                        <td style="text-align:center;">
                                            #F0FFFF
                                        </td>
                                        <td style="text-align:center;">
                                            240,255,255
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#e0ffff" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LightCyan
                                        </td>
                                        <td style="text-align:center;">
                                            淡青色
                                        </td>
                                        <td style="text-align:center;">
                                            #E1FFFF
                                        </td>
                                        <td style="text-align:center;">
                                            225,255,255
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#afeeee" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            PaleTurquoise
                                        </td>
                                        <td style="text-align:center;">
                                            苍白的绿宝石
                                        </td>
                                        <td style="text-align:center;">
                                            #AFEEEE
                                        </td>
                                        <td style="text-align:center;">
                                            175,238,238
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#00ffff" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Cyan
                                        </td>
                                        <td style="text-align:center;">
                                            青色
                                        </td>
                                        <td style="text-align:center;">
                                            #00FFFF
                                        </td>
                                        <td style="text-align:center;">
                                            0,255,255
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#00ffff" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Aqua
                                        </td>
                                        <td style="text-align:center;">
                                            水绿色
                                        </td>
                                        <td style="text-align:center;">
                                            #00FFFF
                                        </td>
                                        <td style="text-align:center;">
                                            0,255,255
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#00ced1" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkTurquoise
                                        </td>
                                        <td style="text-align:center;">
                                            深绿宝石
                                        </td>
                                        <td style="text-align:center;">
                                            #00CED1
                                        </td>
                                        <td style="text-align:center;">
                                            0,206,209
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#2f4f4f" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkSlateGray
                                        </td>
                                        <td style="text-align:center;">
                                            深石板灰
                                        </td>
                                        <td style="text-align:center;">
                                            #2F4F4F
                                        </td>
                                        <td style="text-align:center;">
                                            47,79,79
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#008b8b" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkCyan
                                        </td>
                                        <td style="text-align:center;">
                                            深青色
                                        </td>
                                        <td style="text-align:center;">
                                            #008B8B
                                        </td>
                                        <td style="text-align:center;">
                                            0,139,139
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#008080" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Teal
                                        </td>
                                        <td style="text-align:center;">
                                            水鸭色
                                        </td>
                                        <td style="text-align:center;">
                                            #008080
                                        </td>
                                        <td style="text-align:center;">
                                            0,128,128
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#48d1cc" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            MediumTurquoise
                                        </td>
                                        <td style="text-align:center;">
                                            适中的绿宝石
                                        </td>
                                        <td style="text-align:center;">
                                            #48D1CC
                                        </td>
                                        <td style="text-align:center;">
                                            72,209,204
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#20b2aa" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LightSeaGreen
                                        </td>
                                        <td style="text-align:center;">
                                            浅海洋绿
                                        </td>
                                        <td style="text-align:center;">
                                            #20B2AA
                                        </td>
                                        <td style="text-align:center;">
                                            32,178,170
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#40e0d0" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Turquoise
                                        </td>
                                        <td style="text-align:center;">
                                            绿宝石
                                        </td>
                                        <td style="text-align:center;">
                                            #40E0D0
                                        </td>
                                        <td style="text-align:center;">
                                            64,224,208
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#a0a000" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Auqamarin
                                        </td>
                                        <td style="text-align:center;">
                                            绿玉\碧绿色
                                        </td>
                                        <td style="text-align:center;">
                                            #7FFFAA
                                        </td>
                                        <td style="text-align:center;">
                                            127,255,170
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#66cdaa" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            MediumAquamarine
                                        </td>
                                        <td style="text-align:center;">
                                            适中的碧绿色
                                        </td>
                                        <td style="text-align:center;">
                                            #00FA9A
                                        </td>
                                        <td style="text-align:center;">
                                            0,250,154
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#00fa9a" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            MediumSpringGreen
                                        </td>
                                        <td style="text-align:center;">
                                            适中的春天的绿色
                                        </td>
                                        <td style="text-align:center;">
                                            #F5FFFA
                                        </td>
                                        <td style="text-align:center;">
                                            245,255,250
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#f5fffa" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            MintCream
                                        </td>
                                        <td style="text-align:center;">
                                            薄荷奶油
                                        </td>
                                        <td style="text-align:center;">
                                            #00FF7F
                                        </td>
                                        <td style="text-align:center;">
                                            0,255,127
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#00ff7f" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            SpringGreen
                                        </td>
                                        <td style="text-align:center;">
                                            春天的绿色
                                        </td>
                                        <td style="text-align:center;">
                                            #3CB371
                                        </td>
                                        <td style="text-align:center;">
                                            60,179,113
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#2e8b57" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            SeaGreen
                                        </td>
                                        <td style="text-align:center;">
                                            海洋绿
                                        </td>
                                        <td style="text-align:center;">
                                            #2E8B57
                                        </td>
                                        <td style="text-align:center;">
                                            46,139,87
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#f0fff0" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Honeydew
                                        </td>
                                        <td style="text-align:center;">
                                            蜂蜜
                                        </td>
                                        <td style="text-align:center;">
                                            #F0FFF0
                                        </td>
                                        <td style="text-align:center;">
                                            240,255,240
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#90ee90" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LightGreen
                                        </td>
                                        <td style="text-align:center;">
                                            淡绿色
                                        </td>
                                        <td style="text-align:center;">
                                            #90EE90
                                        </td>
                                        <td style="text-align:center;">
                                            144,238,144
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#98fb98" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            PaleGreen
                                        </td>
                                        <td style="text-align:center;">
                                            苍白的绿色
                                        </td>
                                        <td style="text-align:center;">
                                            #98FB98
                                        </td>
                                        <td style="text-align:center;">
                                            152,251,152
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#8fbc8f" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkSeaGreen
                                        </td>
                                        <td style="text-align:center;">
                                            深海洋绿
                                        </td>
                                        <td style="text-align:center;">
                                            #8FBC8F
                                        </td>
                                        <td style="text-align:center;">
                                            143,188,143
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#32cd32" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LimeGreen
                                        </td>
                                        <td style="text-align:center;">
                                            酸橙绿
                                        </td>
                                        <td style="text-align:center;">
                                            #32CD32
                                        </td>
                                        <td style="text-align:center;">
                                            50,205,50
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#00ff00" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Lime
                                        </td>
                                        <td style="text-align:center;">
                                            酸橙色
                                        </td>
                                        <td style="text-align:center;">
                                            #00FF00
                                        </td>
                                        <td style="text-align:center;">
                                            0,255,0
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#228b22" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            ForestGreen
                                        </td>
                                        <td style="text-align:center;">
                                            森林绿
                                        </td>
                                        <td style="text-align:center;">
                                            #228B22
                                        </td>
                                        <td style="text-align:center;">
                                            34,139,34
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#008000" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Green
                                        </td>
                                        <td style="text-align:center;">
                                            纯绿
                                        </td>
                                        <td style="text-align:center;">
                                            #008000
                                        </td>
                                        <td style="text-align:center;">
                                            0,128,0
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#006400" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkGreen
                                        </td>
                                        <td style="text-align:center;">
                                            深绿色
                                        </td>
                                        <td style="text-align:center;">
                                            #006400
                                        </td>
                                        <td style="text-align:center;">
                                            0,100,0
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#7fff00" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Chartreuse
                                        </td>
                                        <td style="text-align:center;">
                                            查特酒绿
                                        </td>
                                        <td style="text-align:center;">
                                            #7FFF00
                                        </td>
                                        <td style="text-align:center;">
                                            127,255,0
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#7cfc00" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LawnGreen
                                        </td>
                                        <td style="text-align:center;">
                                            草坪绿
                                        </td>
                                        <td style="text-align:center;">
                                            #7CFC00
                                        </td>
                                        <td style="text-align:center;">
                                            124,252,0
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#adff2f" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            GreenYellow
                                        </td>
                                        <td style="text-align:center;">
                                            绿黄色
                                        </td>
                                        <td style="text-align:center;">
                                            #ADFF2F
                                        </td>
                                        <td style="text-align:center;">
                                            173,255,47
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#6b8e23" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            OliveDrab
                                        </td>
                                        <td style="text-align:center;">
                                            橄榄土褐色
                                        </td>
                                        <td style="text-align:center;">
                                            #556B2F
                                        </td>
                                        <td style="text-align:center;">
                                            85,107,47
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#f5f5dc" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Beige
                                        </td>
                                        <td style="text-align:center;">
                                            米色(浅褐色)
                                        </td>
                                        <td style="text-align:center;">
                                            #6B8E23
                                        </td>
                                        <td style="text-align:center;">
                                            107,142,35
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#fafad2" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LightGoldenrodYellow
                                        </td>
                                        <td style="text-align:center;">
                                            浅秋麒麟黄
                                        </td>
                                        <td style="text-align:center;">
                                            #FAFAD2
                                        </td>
                                        <td style="text-align:center;">
                                            250,250,210
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#fffff0" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Ivory
                                        </td>
                                        <td style="text-align:center;">
                                            象牙
                                        </td>
                                        <td style="text-align:center;">
                                            #FFFFF0
                                        </td>
                                        <td style="text-align:center;">
                                            255,255,240
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffffe0" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LightYellow
                                        </td>
                                        <td style="text-align:center;">
                                            浅黄色
                                        </td>
                                        <td style="text-align:center;">
                                            #FFFFE0
                                        </td>
                                        <td style="text-align:center;">
                                            255,255,224
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffff00" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Yellow
                                        </td>
                                        <td style="text-align:center;">
                                            纯黄
                                        </td>
                                        <td style="text-align:center;">
                                            #FFFF00
                                        </td>
                                        <td style="text-align:center;">
                                            255,255,0
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#808000" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Olive
                                        </td>
                                        <td style="text-align:center;">
                                            橄榄
                                        </td>
                                        <td style="text-align:center;">
                                            #808000
                                        </td>
                                        <td style="text-align:center;">
                                            128,128,0
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#bdb76b" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkKhaki
                                        </td>
                                        <td style="text-align:center;">
                                            深卡其布
                                        </td>
                                        <td style="text-align:center;">
                                            #BDB76B
                                        </td>
                                        <td style="text-align:center;">
                                            189,183,107
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#fffacd" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LemonChiffon
                                        </td>
                                        <td style="text-align:center;">
                                            柠檬薄纱
                                        </td>
                                        <td style="text-align:center;">
                                            #FFFACD
                                        </td>
                                        <td style="text-align:center;">
                                            255,250,205
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#a00d00" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            PaleGodenrod
                                        </td>
                                        <td style="text-align:center;">
                                            灰秋麒麟
                                        </td>
                                        <td style="text-align:center;">
                                            #EEE8AA
                                        </td>
                                        <td style="text-align:center;">
                                            238,232,170
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#f0e68c" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Khaki
                                        </td>
                                        <td style="text-align:center;">
                                            卡其布
                                        </td>
                                        <td style="text-align:center;">
                                            #F0E68C
                                        </td>
                                        <td style="text-align:center;">
                                            240,230,140
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffd700" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Gold
                                        </td>
                                        <td style="text-align:center;">
                                            金
                                        </td>
                                        <td style="text-align:center;">
                                            #FFD700
                                        </td>
                                        <td style="text-align:center;">
                                            255,215,0
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#c00000" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Cornislk
                                        </td>
                                        <td style="text-align:center;">
                                            玉米色
                                        </td>
                                        <td style="text-align:center;">
                                            #FFF8DC
                                        </td>
                                        <td style="text-align:center;">
                                            255,248,220
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#daa520" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            GoldEnrod
                                        </td>
                                        <td style="text-align:center;">
                                            秋麒麟
                                        </td>
                                        <td style="text-align:center;">
                                            #DAA520
                                        </td>
                                        <td style="text-align:center;">
                                            218,165,32
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#fffaf0" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            FloralWhite
                                        </td>
                                        <td style="text-align:center;">
                                            花的白色
                                        </td>
                                        <td style="text-align:center;">
                                            #FFFAF0
                                        </td>
                                        <td style="text-align:center;">
                                            255,250,240
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#fdf5e6" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            OldLace
                                        </td>
                                        <td style="text-align:center;">
                                            老饰带
                                        </td>
                                        <td style="text-align:center;">
                                            #FDF5E6
                                        </td>
                                        <td style="text-align:center;">
                                            253,245,230
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#f5deb3" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Wheat
                                        </td>
                                        <td style="text-align:center;">
                                            小麦色
                                        </td>
                                        <td style="text-align:center;">
                                            #F5DEB3
                                        </td>
                                        <td style="text-align:center;">
                                            245,222,179
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffe4b5" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Moccasin
                                        </td>
                                        <td style="text-align:center;">
                                            鹿皮鞋
                                        </td>
                                        <td style="text-align:center;">
                                            #FFE4B5
                                        </td>
                                        <td style="text-align:center;">
                                            255,228,181
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffa500" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Orange
                                        </td>
                                        <td style="text-align:center;">
                                            橙色
                                        </td>
                                        <td style="text-align:center;">
                                            #FFA500
                                        </td>
                                        <td style="text-align:center;">
                                            255,165,0
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffefd5" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            PapayaWhip
                                        </td>
                                        <td style="text-align:center;">
                                            番木瓜
                                        </td>
                                        <td style="text-align:center;">
                                            #FFEFD5
                                        </td>
                                        <td style="text-align:center;">
                                            255,239,213
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffebcd" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            BlanchedAlmond
                                        </td>
                                        <td style="text-align:center;">
                                            漂白的杏仁
                                        </td>
                                        <td style="text-align:center;">
                                            #FFEBCD
                                        </td>
                                        <td style="text-align:center;">
                                            255,235,205
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffdead" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            NavajoWhite
                                        </td>
                                        <td style="text-align:center;">
                                            Navajo白
                                        </td>
                                        <td style="text-align:center;">
                                            #FFDEAD
                                        </td>
                                        <td style="text-align:center;">
                                            255,222,173
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#faebd7" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            AntiqueWhite
                                        </td>
                                        <td style="text-align:center;">
                                            古代的白色
                                        </td>
                                        <td style="text-align:center;">
                                            #FAEBD7
                                        </td>
                                        <td style="text-align:center;">
                                            250,235,215
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#d2b48c" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Tan
                                        </td>
                                        <td style="text-align:center;">
                                            晒黑
                                        </td>
                                        <td style="text-align:center;">
                                            #D2B48C
                                        </td>
                                        <td style="text-align:center;">
                                            210,180,140
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#b00000" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            BrulyWood
                                        </td>
                                        <td style="text-align:center;">
                                            结实的树
                                        </td>
                                        <td style="text-align:center;">
                                            #DEB887
                                        </td>
                                        <td style="text-align:center;">
                                            222,184,135
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffe4c4" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Bisque
                                        </td>
                                        <td style="text-align:center;">
                                            (浓汤)乳脂,番茄等
                                        </td>
                                        <td style="text-align:center;">
                                            #FFE4C4
                                        </td>
                                        <td style="text-align:center;">
                                            255,228,196
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ff8c00" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkOrange
                                        </td>
                                        <td style="text-align:center;">
                                            深橙色
                                        </td>
                                        <td style="text-align:center;">
                                            #FF8C00
                                        </td>
                                        <td style="text-align:center;">
                                            255,140,0
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#faf0e6" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Linen
                                        </td>
                                        <td style="text-align:center;">
                                            亚麻布
                                        </td>
                                        <td style="text-align:center;">
                                            #FAF0E6
                                        </td>
                                        <td style="text-align:center;">
                                            250,240,230
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#cd853f" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Peru
                                        </td>
                                        <td style="text-align:center;">
                                            秘鲁
                                        </td>
                                        <td style="text-align:center;">
                                            #CD853F
                                        </td>
                                        <td style="text-align:center;">
                                            205,133,63
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffdab9" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            PeachPuff
                                        </td>
                                        <td style="text-align:center;">
                                            桃色
                                        </td>
                                        <td style="text-align:center;">
                                            #FFDAB9
                                        </td>
                                        <td style="text-align:center;">
                                            255,218,185
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#f4a460" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            SandyBrown
                                        </td>
                                        <td style="text-align:center;">
                                            沙棕色
                                        </td>
                                        <td style="text-align:center;">
                                            #F4A460
                                        </td>
                                        <td style="text-align:center;">
                                            244,164,96
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#d2691e" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Chocolate
                                        </td>
                                        <td style="text-align:center;">
                                            巧克力
                                        </td>
                                        <td style="text-align:center;">
                                            #D2691E
                                        </td>
                                        <td style="text-align:center;">
                                            210,105,30
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#8b4513" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            SaddleBrown
                                        </td>
                                        <td style="text-align:center;">
                                            马鞍棕色
                                        </td>
                                        <td style="text-align:center;">
                                            #8B4513
                                        </td>
                                        <td style="text-align:center;">
                                            139,69,19
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#fff5ee" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            SeaShell
                                        </td>
                                        <td style="text-align:center;">
                                            海贝壳
                                        </td>
                                        <td style="text-align:center;">
                                            #FFF5EE
                                        </td>
                                        <td style="text-align:center;">
                                            255,245,238
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#a0522d" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Sienna
                                        </td>
                                        <td style="text-align:center;">
                                            黄土赭色
                                        </td>
                                        <td style="text-align:center;">
                                            #A0522D
                                        </td>
                                        <td style="text-align:center;">
                                            160,82,45
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffa07a" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LightSalmon
                                        </td>
                                        <td style="text-align:center;">
                                            浅鲜肉(鲑鱼)色
                                        </td>
                                        <td style="text-align:center;">
                                            #FFA07A
                                        </td>
                                        <td style="text-align:center;">
                                            255,160,122
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ff7f50" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Coral
                                        </td>
                                        <td style="text-align:center;">
                                            珊瑚
                                        </td>
                                        <td style="text-align:center;">
                                            #FF7F50
                                        </td>
                                        <td style="text-align:center;">
                                            255,127,80
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ff4500" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            OrangeRed
                                        </td>
                                        <td style="text-align:center;">
                                            橙红色
                                        </td>
                                        <td style="text-align:center;">
                                            #FF4500
                                        </td>
                                        <td style="text-align:center;">
                                            255,69,0
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#e9967a" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkSalmon
                                        </td>
                                        <td style="text-align:center;">
                                            深鲜肉(鲑鱼)色
                                        </td>
                                        <td style="text-align:center;">
                                            #E9967A
                                        </td>
                                        <td style="text-align:center;">
                                            233,150,122
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ff6347" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Tomato
                                        </td>
                                        <td style="text-align:center;">
                                            番茄
                                        </td>
                                        <td style="text-align:center;">
                                            #FF6347
                                        </td>
                                        <td style="text-align:center;">
                                            255,99,71
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffe4e1" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            MistyRose
                                        </td>
                                        <td style="text-align:center;">
                                            薄雾玫瑰
                                        </td>
                                        <td style="text-align:center;">
                                            #FFE4E1
                                        </td>
                                        <td style="text-align:center;">
                                            255,228,225
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#fa8072" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Salmon
                                        </td>
                                        <td style="text-align:center;">
                                            鲜肉(鲑鱼)色
                                        </td>
                                        <td style="text-align:center;">
                                            #FA8072
                                        </td>
                                        <td style="text-align:center;">
                                            250,128,114
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#fffafa" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Snow
                                        </td>
                                        <td style="text-align:center;">
                                            雪
                                        </td>
                                        <td style="text-align:center;">
                                            #FFFAFA
                                        </td>
                                        <td style="text-align:center;">
                                            255,250,250
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#f08080" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LightCoral
                                        </td>
                                        <td style="text-align:center;">
                                            淡珊瑚色
                                        </td>
                                        <td style="text-align:center;">
                                            #F08080
                                        </td>
                                        <td style="text-align:center;">
                                            240,128,128
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#bc8f8f" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            RosyBrown
                                        </td>
                                        <td style="text-align:center;">
                                            玫瑰棕色
                                        </td>
                                        <td style="text-align:center;">
                                            #BC8F8F
                                        </td>
                                        <td style="text-align:center;">
                                            188,143,143
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#cd5c5c" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            IndianRed
                                        </td>
                                        <td style="text-align:center;">
                                            印度红
                                        </td>
                                        <td style="text-align:center;">
                                            #CD5C5C
                                        </td>
                                        <td style="text-align:center;">
                                            205,92,92
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ff0000" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Red
                                        </td>
                                        <td style="text-align:center;">
                                            纯红
                                        </td>
                                        <td style="text-align:center;">
                                            #FF0000
                                        </td>
                                        <td style="text-align:center;">
                                            255,0,0
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#a52a2a" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Brown
                                        </td>
                                        <td style="text-align:center;">
                                            棕色
                                        </td>
                                        <td style="text-align:center;">
                                            #A52A2A
                                        </td>
                                        <td style="text-align:center;">
                                            165,42,42
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#b22222" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            FireBrick
                                        </td>
                                        <td style="text-align:center;">
                                            耐火砖
                                        </td>
                                        <td style="text-align:center;">
                                            #B22222
                                        </td>
                                        <td style="text-align:center;">
                                            178,34,34
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#8b0000" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkRed
                                        </td>
                                        <td style="text-align:center;">
                                            深红色
                                        </td>
                                        <td style="text-align:center;">
                                            #8B0000
                                        </td>
                                        <td style="text-align:center;">
                                            139,0,0
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#800000" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Maroon
                                        </td>
                                        <td style="text-align:center;">
                                            栗色
                                        </td>
                                        <td style="text-align:center;">
                                            #800000
                                        </td>
                                        <td style="text-align:center;">
                                            128,0,0
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#ffffff" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            White
                                        </td>
                                        <td style="text-align:center;">
                                            纯白
                                        </td>
                                        <td style="text-align:center;">
                                            #FFFFFF
                                        </td>
                                        <td style="text-align:center;">
                                            255,255,255
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#f5f5f5" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            WhiteSmoke
                                        </td>
                                        <td style="text-align:center;">
                                            白烟
                                        </td>
                                        <td style="text-align:center;">
                                            #F5F5F5
                                        </td>
                                        <td style="text-align:center;">
                                            245,245,245
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#dcdcdc" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Gainsboro
                                        </td>
                                        <td style="text-align:center;">
                                            Gainsboro
                                        </td>
                                        <td style="text-align:center;">
                                            #DCDCDC
                                        </td>
                                        <td style="text-align:center;">
                                            220,220,220
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#d3d3d3" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            LightGrey
                                        </td>
                                        <td style="text-align:center;">
                                            浅灰色
                                        </td>
                                        <td style="text-align:center;">
                                            #D3D3D3
                                        </td>
                                        <td style="text-align:center;">
                                            211,211,211
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#c0c0c0" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Silver
                                        </td>
                                        <td style="text-align:center;">
                                            银白色
                                        </td>
                                        <td style="text-align:center;">
                                            #C0C0C0
                                        </td>
                                        <td style="text-align:center;">
                                            192,192,192
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#a9a9a9" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DarkGray
                                        </td>
                                        <td style="text-align:center;">
                                            深灰色
                                        </td>
                                        <td style="text-align:center;">
                                            #A9A9A9
                                        </td>
                                        <td style="text-align:center;">
                                            169,169,169
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#808080" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Gray
                                        </td>
                                        <td style="text-align:center;">
                                            灰色
                                        </td>
                                        <td style="text-align:center;">
                                            #808080
                                        </td>
                                        <td style="text-align:center;">
                                            128,128,128
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#696969" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            DimGray
                                        </td>
                                        <td style="text-align:center;">
                                            暗淡的灰色
                                        </td>
                                        <td style="text-align:center;">
                                            #696969
                                        </td>
                                        <td style="text-align:center;">
                                            105,105,105
                                        </td>
                                    </tr>
                                    <tr>
                                        <td bgcolor="#000000" style="text-align:center;">
                                        </td>
                                        <td style="text-align:center;">
                                            Black
                                        </td>
                                        <td style="text-align:center;">
                                            纯黑
                                        </td>
                                        <td style="text-align:center;">
                                            #000000
                                        </td>
                                        <td style="text-align:center;">
                                            0,0,0
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="doc-democode doc-codead0 ">

                        <xmp>
                            /* 自定义颜色样式，请遵循如下格式 如果觉得麻烦可以使用拼图自定义颜色生成工具 */ .text-lightpink, a.text-lightpink:link, a.text-lightpink:visited, .button.border-lightpink, blockquote.border-lightpink, .pager.border-lightpink a, .pager-prev.border-lightpink, .pager-next.border-lightpink
                            { color: #FFB6C1; } .border-lightpink, .border-lightpink .button, .border-lightpink .tab-nav li a, .border-lightpink .tab-body, .button.bg-lightpink, .selected.border-lightpink, .pointer.border-lightpink li, .nav.border-lightpink
                            .active a, .nav.nav-tabs.border-lightpink, .nav-main.border-lightpink a, .nav-main.border-lightpink .nav-head, .pagination.border-lightpink li, .pager.border-lightpink a { border-color: #FFB6C1; } .bg-lightpink, .border-lightpink
                            .button.active, .pointer.border-lightpink .active, .nav-pills.border-lightpink .active a, .nav-lightpink.border-lightpink .nav-head, .pagination.border-lightpink .active { background-color: #FFB6C1; }
                        </xmp>
                    </div>
                    <h4 class="doc-title" id="color-list">配色方案</h4>
                    <div class="doc-input">
                        常用的一些配色方案，仅供参考。当然也可以使用：<a class="tag bg-yellow" href="tools/setcolor.html" target="_blank">拼图配色工具</a></div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="line">
                                <div class="x6"><img src="images/color.gif" class="img-responsive radius-small" /></div>
                                <div class="x6"><img src="images/color-d.gif" class="img-responsive radius-small" /></div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            ...
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="bgborder">
                        背景、边框、圆角
                    </h2>
                    <p class="doc-lead">
                    </p>
                    <h3 class="doc-h3" id="bg-color">
                        背景色
                    </h3>
                    <p class="doc-readme">
                        给元素添加背景色样式，突出或强调信息，实际应用中建议修改为自主定义的颜色。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="doc-bg-color">
                                <p class="bg">
                                    默认：拼图前端框架。</p>
                                <p class="bg-main bg-inverse">
                                    主色：拼图前端框架，是一款开源的专业网页前端UI解决方案。</p>
                                <p class="bg-sub bg-inverse">
                                    辅助色：是HTML、CSS、Javascrip三者结合的前端框架。</p>
                                <p class="bg-back">
                                    背景色：配合js效果，提供了拼图的CSS、HTML标准。</p>
                                <p class="bg-mix">
                                    融合色：方便个性化、人性化的前端设计方法。</p>
                                <p class="bg-dot bg-inverse">
                                    点缀色：受到设计师、前端工程师、程序员及网页设计初学者的喜爱。</p>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p class="bg">
                                默认</p>
                            <p class="bg-main">
                                主色</p>
                            <p class="bg-sub">
                                辅助色</p>
                            <p class="bg-back">
                                背景色</p>
                            <p class="bg-mix">
                                融合色</p>
                            <p class="bg-dot">
                                点缀色</p>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        黑灰白
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="doc-bg-color">
                                <p class="bg-black bg-inverse">
                                    黑色：拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及JS交互。</p>
                                <p class="bg-gray bg-inverse">
                                    灰色：配合js效果，提供了拼图的CSS、HTML标准。</p>
                                <p class="bg-white">
                                    白色：让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。</p>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p class="bg-black">
                                黑色</p>
                            <p class="bg-gray">
                                灰色</p>
                            <p class="bg-white">
                                白色</p>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        反色
                    </h4>
                    <div class="doc-input">
                        当使用的背景色为深色时，内部文字需要用白色文本，则加上.bg-inverse，实现文字颜色的处理。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="doc-bg-color">
                                <p class="bg-main">
                                    无反色处理</p>
                                <p class="bg-main bg-inverse">
                                    反色处理</p>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p class="bg-main">
                                无反色处理</p>
                            <p class="bg-main bg-inverse">
                                反色处理</p>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="bg-notice">
                        提示背景
                    </h3>
                    <p class="doc-readme">
                        提示背景包含红、黄、蓝、绿四种，分别表示危险、警告、主要、成功三种信号。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="doc-bg-color">
                                <p class="bg-red bg-inverse">
                                    危险：拼图前端框架，是一款开源的专业网页前端UI解决方案。</p>
                                <p class="bg-yellow bg-inverse">
                                    警告：是HTML、CSS、Javascrip三者结合的前端框架。</p>
                                <p class="bg-blue bg-inverse">
                                    主要：方便个性化、人性化的前端设计方法。</p>
                                <p class="bg-green bg-inverse">
                                    成功：配合js效果，提供了拼图的CSS、HTML标准。</p>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p class="bg-red">
                                危险</p>
                            <p class="bg-yellow">
                                警告</p>
                            <p class="bg-blue">
                                主要</p>
                            <p class="bg-green">
                                成功</p>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        柔和色
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="doc-bg-color">
                                <p class="bg-red-light">
                                    淡红-危险：拼图前端框架，是一款开源的专业网页前端UI解决方案。</p>
                                <p class="bg-yellow-light">
                                    淡黄-警告：是HTML、CSS、Javascrip三者结合的前端框架。</p>
                                <p class="bg-blue-light">
                                    淡蓝-主要：方便个性化、人性化的前端设计方法。</p>
                                <p class="bg-green-light">
                                    淡绿-成功：配合js效果，提供了拼图的CSS、HTML标准。</p>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <p class="bg-red-light">
                                淡红-危险</p>
                            <p class="bg-yellow-light">
                                淡黄-警告</p>
                            <p class="bg-blue-light">
                                淡蓝-主要</p>
                            <p class="bg-green-light">
                                淡绿-成功</p>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="border">
                        边框颜色
                    </h3>
                    <p class="doc-readme">
                        定义边框颜色。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="doc-border">
                                <div class="border">
                                    边框：默认</div>
                                <div class="border border-main">
                                    边框：主色</div>
                                <div class="border border-sub">
                                    边框：辅色</div>
                                <div class="border border-back">
                                    边框：背景色</div>
                                <div class="border border-mix">
                                    边框：融合色</div>
                                <div class="border border-dot">
                                    边框：点缀色</div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="border">
                                边框：默认</div>
                            <div class="border border-main">
                                边框：主色</div>
                            <div class="border border-sub">
                                边框：辅色</div>
                            <div class="border border-back">
                                边框：背景色</div>
                            <div class="border border-mix">
                                边框：融合色</div>
                            <div class="border border-dot">
                                边框：点缀色</div>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        黑灰白
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="doc-border">
                                <div class="border border-black">
                                    边框：黑色</div>
                                <div class="border border-gray">
                                    边框：灰色</div>
                                <div class="border border-white">
                                    边框：白色</div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="border border-black">
                                边框：黑色</div>
                            <div class="border border-gray">
                                边框：灰色</div>
                            <div class="border border-white">
                                边框：白色</div>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        提示边框色
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="doc-border">
                                <div class="border border-red">
                                    边框：红色</div>
                                <div class="border border-yellow">
                                    边框：黄色</div>
                                <div class="border border-blue">
                                    边框：蓝色</div>
                                <div class="border border-green">
                                    边框：绿色</div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="border border-red">
                                边框：红色</div>
                            <div class="border border-yellow">
                                边框：黄色</div>
                            <div class="border border-blue">
                                边框：蓝色</div>
                            <div class="border border-green">
                                边框：绿色</div>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        柔和色
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="doc-border">
                                <div class="border border-red-light">
                                    边框：淡红</div>
                                <div class="border border-yellow-light">
                                    边框：淡黄</div>
                                <div class="border border-blue-light">
                                    边框：淡蓝</div>
                                <div class="border border-green-light">
                                    边框：淡绿</div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="border border-red-light">
                                边框：淡红</div>
                            <div class="border border-yellow-light">
                                边框：淡黄</div>
                            <div class="border border-blue-light">
                                边框：淡蓝</div>
                            <div class="border border-green-light">
                                边框：淡绿</div>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="border-style">
                        边框大小、位置及样式
                    </h3>
                    <p class="doc-readme">
                        设置边框的大小粗细、上下左右的位置及不同的样式效果。</p>
                    <h4 class="doc-title">
                        边框大小
                    </h4>
                    <div class="doc-input">
                        边框大小分为默认(1px)、无边框(none)、小边框.border-little(2px)、中边框.border-middle(3px)、大边框.boder-big(5px)、超大边框.border-large(10px)。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="doc-border">
                                <div class="border">
                                    默认边框</div>
                                <div class="border border-none">
                                    没有边框</div>
                                <div class="border border-small">
                                    小边框</div>
                                <div class="border border-middle">
                                    中边框</div>
                                <div class="border border-big">
                                    大边框</div>
                                <div class="border border-large">
                                    超大边框</div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="border">
                                默认边框</div>
                            <div class="border border-small">
                                小边框</div>
                            <div class="border border-middle">
                                中边框</div>
                            <div class="border border-big">
                                大边框</div>
                            <div class="border border-large">
                                超大边框</div>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        边框位置
                    </h4>
                    <div class="doc-input">
                        边框所在的上、右、下、左及左右、上下位置。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="doc-border">
                                <div class="border-small border-top">
                                    上边框</div>
                                <div class="border-small border-right">
                                    右边框</div>
                                <div class="border-small border-bottom">
                                    下边框</div>
                                <div class="border-small border-left">
                                    左边框</div>
                                <div class="border-small border-top-bottom">
                                    上下边框</div>
                                <div class="border-small border-left-right">
                                    左右边框</div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="border-small border-top">
                                上边框</div>
                            <div class="border-small border-right">
                                右边框</div>
                            <div class="border-small border-bottom">
                                下边框</div>
                            <div class="border-small border-left">
                                左边框</div>
                            <div class="border-small border-top-bottom">
                                上下边框</div>
                            <div class="border-small border-left-right">
                                左右边框</div>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        边框样式
                    </h4>
                    <div class="doc-input">
                        边框的样式，如虚线(.border-dashed)、点(.border-dotted)、双线(.border-double)、内凹(.border-inset)、外凸(.border-outset)等边框效果。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="doc-border">
                                <div class="border border-small border-dashed">
                                    虚线边框</div>
                                <div class="border border-small border-dotted">
                                    点边框</div>
                                <div class="border border-small border-double">
                                    双线边框</div>
                                <div class="border border-small border-inset">
                                    内凹边框</div>
                                <div class="border border-small border-outset">
                                    外凸边框</div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="border border-small border-dashed">
                                虚线边框</div>
                            <div class="border border-small border-dotted">
                                点边框</div>
                            <div class="border border-small border-double">
                                双线边框</div>
                            <div class="border border-small border-inset">
                                内凹边框</div>
                            <div class="border border-small border-outset">
                                外凸边框</div>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        组合效果
                    </h4>
                    <div class="doc-input">
                        大小、位置、样式三种样式可以组合使用，调配成想要的效果。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="doc-border">
                                <div class="border-green border-top-bottom border-dotted">
                                    绿色上下点边框</div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="border-green border-top-bottom border-dotted">
                                绿色上下点边框</div>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="bg-radius">
                        圆角
                    </h3>
                    <p class="doc-readme">
                        添加圆角.radius，小圆角.radius-small，大圆角.radius-big，圆.radius-circle样式，可以使背景或边框圆角化。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="doc-radius">
                                <div class="border bg radius-none">
                                    直角：0px</div>
                                <div class="border bg radius-small">
                                    小圆角：2px</div>
                                <div class="border bg radius">
                                    圆角：4px</div>
                                <div class="border bg radius-big">
                                    大圆角：6px</div>
                                <div class="border bg radius-rounded">
                                    绕圆角：2em</div>
                                <div class="border bg radius-circle">
                                    圆：50%</div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="radius-none">
                                直角：0px</div>
                            <div class="radius-small">
                                小圆角：2px</div>
                            <div class="radius">
                                圆角：4px</div>
                            <div class="radius-big">
                                大圆角：6px</div>
                            <div class="radius-rounded">
                                绕圆角：2em</div>
                            <div class="radius-circle">
                                圆：50%</div>
                        </xmp>
                    </div>
                    <blockquote class="quote border-yellow doc-quoteyellow">
                        <strong>在IE8及以下浏览器不支持</strong>
                        <p>
                            因IE8及以下浏览器不支持CSS3，所以圆角效果不显示，直接显示为直角。radius-none为直角，可以用来消除已有圆角效果的样式。</p>
                    </blockquote>
                    <br />
                    <br />

                    <h3 class="doc-h3" id="box-shadow">
                        阴影&nbsp;<span class="tag bg-yellow">新增</span>
                    </h3>
                    <p class="doc-readme">
                        添加阴影.box-shadow，小阴影.box-shadow-small，大阴影.box-shadow-big，无阴影.box-shadow-none 可覆盖原有阴影样式。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="alert box-shadow-none">
                                无阴影.box-shadow-none：0px，可以覆盖已有的阴影</div>
                            <br>
                            <div class="alert box-shadow-small">
                                小阴影.box-shadow-small：2px</div>
                            <br>
                            <div class="alert box-shadow">
                                阴影.box-shadow：4px，默认阴影</div>
                            <br>
                            <div class="alert box-shadow-big">
                                大阴影.box-shadow-big：6px</div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="alert box-shadow-none">
                                无阴影.box-shadow-none：0px，可以覆盖已有的阴影</div>
                            <br>
                            <div class="alert box-shadow-small">
                                小阴影.box-shadow-small：2px</div>
                            <br>
                            <div class="alert box-shadow">
                                阴影.box-shadow：4px，默认阴影</div>
                            <br>
                            <div class="alert box-shadow-big">
                                大阴影.box-shadow-big：6px</div>
                        </xmp>
                    </div>
                    <blockquote class="quote border-yellow doc-quoteyellow">
                        <strong>在IE8及以下浏览器不支持</strong>
                        <p>
                            因IE8及以下浏览器不支持CSS3，所以阴影效果不显示。box-shadow-none，可以用来消除已有阴影效果的样式。</p>
                    </blockquote>
                    <br>
                    <br>
                    <h2 class="doc-h2" id="cssbox">
                        边界、填充
                    </h2>
                    <p class="doc-lead">
                        包含边界(.margin)和填充(.padding)，在理解他们与边框、内容的关系时，应该先了解下CSS的盒子模型。</p>
                    <h3 class="doc-h3" id="boxmodel">
                        盒子模型
                    </h3>
                    <p class="doc-readme">
                        每个盒子都有：边界、边框、填充、内容四个属性；每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；举个箱子例子，最里面的物品(内容)、物品由泡沫(填充)保护着、然后箱子(边框)、最后是箱子离你的距离(边界)，这就是一个完整的盒子模型。</p>
                    <div class="doc-input">
                        <div class="line">
                            <div class="x6 x3-move">
                                <div class="bg-inverse text-center">
                                    <div class="padding bg-green">
                                        边界：margin
                                        <div class="padding bg-yellow margin">
                                            边框：border
                                            <div class="padding bg-blue margin">
                                                填充：padding
                                                <div class="padding bg text-red margin">
                                                    内容：content</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h3 class="doc-h3" id="border-place">
                        边界位置
                    </h3>
                    <p class="doc-readme">
                        包含上、右、下、左及四个都有的位置属性，默认的.margin外边距大小为10px。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-green" style="overflow: hidden;">
                                        <div class="margin bg text-center clearfix">
                                            默认边界</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-green" style="overflow: hidden;">
                                        <div class="margin-top bg text-center clearfix">
                                            上边界</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-green" style="overflow: hidden;">
                                        <div class="margin-right bg text-center clearfix">
                                            右边界</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-green" style="overflow: hidden;">
                                        <div class="margin-bottom bg text-center clearfix">
                                            下边界</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-green" style="overflow: hidden;">
                                        <div class="margin-left bg text-center clearfix">
                                            左边界</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="margin">
                                默认边界</div>
                            <div class="margin-top">
                                上边界</div>
                            <div class="margin-right">
                                右边界</div>
                            <div class="margin-bottom">
                                下边界</div>
                            <div class="margin-left">
                                左边界</div>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="margin-size">
                        边界大小
                    </h3>
                    <p class="doc-readme">
                        边界大小包含超小边界2px(.margin-little)、小边界5px(.margin-small)、默认边界10px(.margin)、大边界20px(.margin-big)、超大边界30px(.margin-large)五个等级。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-green" style="overflow: hidden;">
                                        <div class="margin-little bg text-center clearfix">
                                            超小边界：2px</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-green" style="overflow: hidden;">
                                        <div class="margin-small bg text-center clearfix">
                                            小边界：5px</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-green" style="overflow: hidden;">
                                        <div class="margin bg text-center clearfix">
                                            默认边界：10px</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-green" style="overflow: hidden;">
                                        <div class="margin-big bg text-center clearfix">
                                            大边界：20px</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-green" style="overflow: hidden;">
                                        <div class="margin-large bg text-center clearfix">
                                            超大边界：30px</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="margin-little">
                                超小边界</div>
                            <div class="margin-small">
                                小边界</div>
                            <div class="margin">
                                默认边界</div>
                            <div class="margin-big">
                                大边界</div>
                            <div class="margin-large">
                                超大边界</div>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        边界的大小和位置
                    </h4>
                    <div class="doc-input">
                        边界的大小和位置.margin-(大小)-(位置)，可以相互组合成所需要的边界效果。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-green" style="overflow: hidden;">
                                        <div class="bg text-center clearfix margin-little-top margin-small-right margin-big-bottom margin-large-left">
                                            上超小、右小、底大、左超大</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="margin-little-top margin-small-right margin-big-bottom margin-large-left">
                                上超小、右小、底大、左超大</div>
                        </xmp>
                    </div>
                    <blockquote class="quote border-red doc-quotered">
                        <strong>边界兼容</strong> margin-top及margin-bottom由于hasLayout渲染导致无效状态，建议使用padding或者用下面的解决办法。</blockquote>
                    <h4 class="doc-title">
                        解决办法
                    </h4>
                    <div class="doc-input">
                        <ul>
                            <li>在父元素加上边框(0，none无效)：border:solid 1px #fff;</li>
                            <li>在父级元素加内填充：padding:1px;</li>
                            <li>在父级元素加浮动：overflow:hidden;</li>
                            <li>该盒子加浮动： float:left; (clear:both;)</li>
                            <li>该元素绝对定位：position:absolute;</li>
                        </ul>
                    </div>
                    <h3 class="doc-h3" id="padding-place">
                        填充位置
                    </h3>
                    <p class="doc-readme">
                        和边界类似，填充也包含上、右、下、左及四个都有的位置属性，默认的.padding外边距大小为10px。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-blue padding">
                                        <div class="bg text-center clearfix">
                                            默认填充</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-blue padding-top">
                                        <div class="bg text-center clearfix">
                                            上填充</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-blue padding-right">
                                        <div class="bg text-center clearfix">
                                            右填充</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-blue padding-bottom">
                                        <div class="bg text-center clearfix">
                                            下填充</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-blue padding-left">
                                        <div class="bg text-center clearfix">
                                            左填充</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="padding">
                                默认填充</div>
                            <div class="padding-top">
                                上填充</div>
                            <div class="padding-right">
                                右填充</div>
                            <div class="padding-bottom">
                                下填充</div>
                            <div class="padding-left">
                                左填充</div>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="padding-size">
                        填充大小
                    </h3>
                    <p class="doc-readme">
                        填充大小包含超小填充2px(.padding-little)、小填充5px(.padding-small)、默认填充10px(.padding)、大填充20px(.padding-big)、超大填充30px(.padding-large)五个等级。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-blue padding-little">
                                        <div class="bg text-center clearfix">
                                            超小填充：2px</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-blue padding-small">
                                        <div class="bg text-center clearfix">
                                            小填充：5px</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-blue padding">
                                        <div class="bg text-center clearfix">
                                            默认填充：10px</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-blue padding-big">
                                        <div class="bg text-center clearfix">
                                            大填充：20px</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-blue padding-large">
                                        <div class="bg text-center clearfix">
                                            超大填充：30px</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="padding-little">
                                超小填充</div>
                            <div class="padding-small">
                                小填充</div>
                            <div class="padding">
                                默认填充</div>
                            <div class="padding-big">
                                大填充</div>
                            <div class="padding-large">
                                超大填充</div>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        大小及位置组合
                    </h4>
                    <div class="doc-input">
                        填充的位置和大小.padding-(大小)-(位置)，可以相互组合成所需要的填充效果。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="line">
                                <div class="x6 x3-move">
                                    <div class="bg-blue padding-little-top padding-small-right padding-big-bottom padding-large-left">
                                        <div class="bg text-center clearfix">
                                            上超小、右小、底大、左超大</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="padding-little-top padding-small-right padding-big-bottom padding-large-left">
                                上超小、右小、底大、左超大</div>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="box-demo">
                        盒子示例
                    </h3>
                    <p class="doc-readme">
                        使用边界、边框、填充三者的内容元素示例。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="line">
                                <div class="x4 x4-move bg margin padding border">
                                    边界、边框、填充</div>
                            </div>
                            <br />
                            <div class="line">
                                <div class="x4 x4-move bg-yellow-light margin-big-top padding-small-bottom border-middle border-right">
                                    上大边界、右中边框、下小填充</div>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="margin padding border">
                                边界、边框、填充</div>
                            <div class="margin-big-top padding-small-bottom border-middle border-right">
                                上大边界、右中边框、下小填充</div>
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="animation">
                        CSS动画
                    </h2>
                    <p class="doc-lead">
                        CSS3动画样式，包含渐变，摇晃，震动，旋转等丰富的前端效果。</p>
                    <h3 class="doc-h3" id="fade">
                        淡入淡出
                    </h3>
                    <p class="doc-readme">
                        使元素具备淡入淡出显示效果，点击按钮即可预览动画。</p>
                    <h4 class="doc-title">
                        淡入动画
                    </h4>
                    <div class="panel doc-demo ">
                        <div class="panel-head doc-ad0">
                            <strong>示例</strong>
                        </div>
                        <div class="panel-body">
                            <button class="doc-animation button bg-red" data-style="fadein">
									淡入.fadein</button>
                            <br />
                            <br />
                            <button class="doc-animation button bg-yellow" data-style="fadein-top">
									上淡入.fadein-top</button>
                            <button class="doc-animation button bg-blue" data-style="fadein-right">
									右淡入.fadein-right</button>
                            <button class="doc-animation button bg-green" data-style="fadein-bottom">
									下淡入.fadein-bottom</button>
                            <button class="doc-animation button bg-black" data-style="fadein-left">
									左淡入.fadein-left</button>
                        </div>
                    </div>
                    <h4 class="doc-title">
                        淡出动画
                    </h4>
                    <div class="panel doc-demo ">
                        <div class="panel-head doc-ad0">
                            <strong>示例</strong>
                        </div>
                        <div class="panel-body">
                            <button class="doc-animation button bg-red" data-style="fadeout">
									淡出.fadeout</button>
                            <br />
                            <br />
                            <button class="doc-animation button bg-yellow" data-style="fadeout-top">
									上淡出.fadeout-top</button>
                            <button class="doc-animation button bg-blue" data-style="fadeout-right">
									右淡出.fadeout-right</button>
                            <button class="doc-animation button bg-green" data-style="fadeout-bottom">
									下淡出.fadeout-bottom</button>
                            <button class="doc-animation button bg-black" data-style="fadeout-left">
									左淡出.fadeout-left</button>
                        </div>
                    </div>
                    <blockquote class="quote border-green doc-quote">
                        <strong>使用方法</strong> 给元素添加样式即可，如淡入，元素使用.fadein即可。</blockquote>
                    <div class="doc-code">
                        <xmp>
                            <div class="fadein">
                                淡入动画</div> <span class="fadeout">淡出动画</span>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="stress">
                        强调动画
                    </h3>
                    <p class="doc-readme">
                        提示的强调CSS动画效果。</p>
                    <div class="panel doc-demo ">
                        <div class="panel-head doc-ad0">
                            <strong>示例</strong>
                        </div>
                        <div class="panel-body">
                            <button class="doc-animation button bg-red" data-style="bounce">
									弹跳.bounce</button>
                            <button class="doc-animation button bg-yellow" data-style="bouncein">
									弹入.bouncein</button>
                            <button class="doc-animation button bg-blue" data-style="bounceout">
									弹出.bounceout</button>
                            <button class="doc-animation button bg-green" data-style="rotatein">
									转入.rotatein</button>
                            <button class="doc-animation button bg-black" data-style="rotateout">
									转出.rotateout</button>
                            <br />
                            <br />
                            <button class="doc-animation button bg-red" data-style="flash">
									闪烁.flash</button>
                            <button class="doc-animation button bg-yellow" data-style="shake">
									震颤.shake</button>
                            <button class="doc-animation button bg-blue" data-style="swing">
									摇摆.swing</button>
                            <button class="doc-animation button bg-green" data-style="wobble">
									摇晃.wobble</button>
                            <button class="doc-animation button bg-black" data-style="ring">
									震铃.ring</button>
                        </div>
                    </div>
                    <h4 class="doc-title">
                        悬浮效果
                    </h4>
                    <div class="doc-input">
                        鼠标悬浮即可实现相关效果。</div>
                    <div class="panel doc-demo ">
                        <div class="panel-head doc-ad0">
                            <strong>示例</strong>
                        </div>
                        <div class="panel-body">
                            <button class="button bg bounce-hover">
									弹跳.bounce-hover</button>
                            <br />
                            <br />
                            <button class="button bg-red flash-hover">
									闪烁.flash-hover</button>
                            <button class="button bg-yellow shake-hover">
									震颤.shake-hover</button>
                            <button class="button bg-blue swing-hover">
									摇摆.swing-hover</button>
                            <button class="button bg-green wobble-hover">
									摇晃.wobble-hover</button>
                            <button class="button bg-black ring-hover">
									震铃.ring-hover</button>
                        </div>
                    </div>
                    <h3 class="doc-h3" id="rotate">
                        旋转
                    </h3>
                    <p class="doc-readme">
                        持续旋转动画。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            旋转： <span class="icon-asterisk rotate"></span><span class="icon-refresh rotate">
                            </span>
                            <br />
                            <br /> 悬浮旋转： <span class="icon-cog rotate-hover"></span><span class="icon-spinner rotate-hover">
                            </span>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <span class="icon-asterisk rotate"></span>
                            <span class="icon-refresh rotate"></span>
                            <span class="icon-cog rotate-hover"></span>
                            <span class="icon-spinner rotate-hover"></span>
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="hr">
                        水平线
                    </h2>
                    <p class="doc-lead">
                    </p>
                    <h3 class="doc-h3" id="hr-line">
                        水平线
                    </h3>
                    <p class="doc-readme">
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            水平线：
                            <hr /> 空白的水平线：
                            <hr class="space" />
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <hr />
                            <hr class="space" />
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="hr-color">
                        颜色
                    </h3>
                    <p class="doc-readme">
                        可以结合背景色，改变水平线的颜色。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            默认
                            <hr /> 主色
                            <hr class="bg-main" /> 辅色
                            <hr class="bg-sub" /> 背景色
                            <hr class="bg-back" /> 融合色
                            <hr class="bg-mix" /> 点缀色
                            <hr class="bg-dot" /> 黑色
                            <hr class="bg-black" /> 灰色
                            <hr class="bg-gray" /> 白色
                            <hr class="bg-white" /> 红色
                            <hr class="bg-red" /> 黄色
                            <hr class="bg-yellow" /> 蓝色
                            <hr class="bg-blue" /> 绿色
                            <hr class="bg-green" />
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <hr />
                            <hr class="bg-main" />
                            <hr class="bg-sub" />
                            <hr class="bg-back" />
                            <hr class="bg-mix" />
                            <hr class="bg-dot" />
                            <hr class="bg-black" />
                            <hr class="bg-gray" />
                            <hr class="bg-white" />
                            <hr class="bg-red" />
                            <hr class="bg-yellow" />
                            <hr class="bg-blue" />
                            <hr class="bg-green" />
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="image">
                        图片
                    </h2>
                    <p class="doc-lead">
                        定义图片样式，形状等样式。</p>
                    <h3 class="doc-h3" id="image-style">
                        图片样式
                    </h3>
                    <p class="doc-readme">
                        使用.radius-(*)样式，可以给图片快速添加效果，改变图片样式。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <img src="images/128.png" width="128" height="128" class="radius-small" />
                            <img src="images/128.png" width="128" height="128" class="radius" />
                            <img src="images/128.png" width="128" height="128" class="radius-big" />
                            <img src="images/128.png" width="128" height="128" class="radius-circle" />
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <img src="images/128.png" width="128" height="128" class="radius-small" />
                            <img src="images/128.png" width="128" height="128" class="radius" />
                            <img src="images/128.png" width="128" height="128" class="radius-big" />
                            <img src="images/128.png" width="128" height="128" class="radius-circle" />
                        </xmp>
                    </div>
                    <blockquote class="quote border-yellow doc-quoteyellow">
                        <strong>IE兼容</strong> IE6,7,8不支持CSS3，不支持圆角效果，直接用直角显示。</blockquote>
                    <h4 class="doc-title">
                        图片外边框
                    </h4>
                    <div class="doc-input">
                        使用.img-border样式，给图片添加外边框效果。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <img src="images/128.png" width="128" height="128" class="img-border radius-small" />
                            <img src="images/128.png" width="128" height="128" class="img-border radius" />
                            <img src="images/128.png" width="128" height="128" class="img-border radius-big" />
                            <img src="images/128.png" width="128" height="128" class="img-border radius-circle" />
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <img src="..." width="128" height="128" class="img-border radius-small" />
                            <img src="..." width="128" height="128" class="img-border radius" />
                            <img src="..." width="128" height="128" class="img-border radius-big" />
                            <img src="..." width="128" height="128" class="img-border radius-circle" />
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        填充边距
                    </h4>
                    <div class="doc-input">
                        使用padding-(*)系列样式，可以改变图片外边框的填充边距。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <img src="images/128.png" width="128" height="128" class="img-border radius-small padding-little" />
                            <img src="images/128.png" width="128" height="128" class="img-border radius padding-small" />
                            <img src="images/128.png" width="128" height="128" class="img-border radius-big padding" />
                            <img src="images/128.png" width="128" height="128" class="img-border radius-circle padding-big" />
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <img src="..." width="128" height="128" class="img-border radius-small padding-little" />
                            <img src="..." width="128" height="128" class="img-border radius padding-small" />
                            <img src="..." width="128" height="128" class="img-border radius-big padding" />
                            <img src="..." width="128" height="128" class="img-border radius-circle padding-big" />
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        边框颜色
                    </h4>
                    <div class="doc-input">
                        可以添加border-(*)边框，改变边框颜色。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <img src="images/64.png" width="64" height="64" class="img-border border-red radius-small" />
                            <img src="images/64.png" width="64" height="64" class="img-border border-yellow radius" />
                            <img src="images/64.png" width="64" height="64" class="img-border border-blue radius-big" />
                            <img src="images/64.png" width="64" height="64" class="img-border border-green radius-circle" />
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <img src="..." class="img-border border-red radius-small" />
                            <img src="..." class="img-border border-yellow radius" />
                            <img src="..." class="img-border border-blue radius-big" />
                            <img src="..." class="img-border border-green radius-circle" />
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="img-responsive">
                        响应式图片
                    </h3>
                    <p class="doc-readme">
                        为了让图片更友好显示，拼图框架设置了响应式图片，让图片宽度为100%；可按比例缩放，但不超过父元素，</p>
                    <div class="doc-code">
                        <xmp>
                            <img src="..." class="img-responsive" alt="响应式图片" />
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="form">
                        表单
                    </h2>
                    <p class="doc-lead">
                        表单输入框、浏览文件、选项按钮等基本效果；多个表单元素使用及表单验证请查看"元件"下的"表单组"及"JS组件"下的"表单验证"文档。</p>
                    <h3 class="doc-h3" id="input">
                        输入框
                    </h3>
                    <p class="doc-readme">
                        输入框</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <form>
                                <input type="text" class="input" placeholder="文本框" />
                                <button class="button">默认</button>
                            </form>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <form>
                                <input type="text" class="input" placeholder="文本框" />
                            </form>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        带label的输入框
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <form>
                                <label class="label">
										账号</label>
                                <input type="text" class="input" placeholder="用户名/邮箱/手机" />
                            </form>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <form>
                                <label class="label">
		账号</label>
                                <input type="text" class="input" placeholder="用户名/邮箱/手机" />
                            </form>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        多行文本框
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <form>
                                <label class="label">
										多行文本框</label>
                                <textarea rows="5" class="input" placeholder="多行文本框"></textarea>
                            </form>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <form>
                                <label class="label">
		多行文本框</label>
                                <textarea rows="5" class="input" placeholder="多行文本框"></textarea>
                            </form>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="file">
                        浏览文件
                    </h3>
                    <p class="doc-readme">
                        浏览文件</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <form>
                                <a class="button input-file" href="javascript:void(0);">+ 浏览文件<input size="100" type="file"
                                name="logo" />
                            </a>
                            </form>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <form>
                                <a class="button input-file" href="javascript:void(0);">+ 浏览文件<input size="100" type="file" /></a>
                            </form>
                        </xmp>
                    </div>
                    <blockquote class="quote border-green doc-quote">
                        <strong>多颜色效果</strong> a链接标签同时可以使用按钮的相关样式，如.border-main,.bg-main等。</blockquote>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <form>
                                <a class="button input-file bg-green" href="javascript:void(0);">+ 浏览文件<input size="100"
                                type="file" name="logo" />
                            </a>
                            </form>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <form>
                                <a class="button input-file bg-green" href="javascript:void(0);">+ 浏览文件<input size="100" type="file" name="logo" /></a>
                            </form>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="select">
                        下拉菜单
                    </h3>
                    <p class="doc-readme">
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <form>
                                <label class="label">
										拼图框架：</label>
                                <select class="input">
										<option>起步</option>
										<option>CSS</option>
										<option>元件</option>
										<option>模块</option>
										<option>javascript组件</option>
									</select>
                            </form>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <form>
                                <label class="label">
		拼图框架：</label>
                                <select class="input">
		<option>起步</option>
		<option>CSS</option>
		<option>元件</option>
		<option>模块</option>
		<option>javascript组件</option>
	</select>
                            </form>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="radio-checkbox">
                        单选多选
                    </h3>
                    <p class="doc-readme">
                    </p>
                    <h4 class="doc-title">
                        单选框
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <form>
                                <label>
										<input type="radio">拼图框架
									</label>
                            </form>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <form>
                                <label>
		<input type="radio">拼图框架
	</label>
                            </form>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        多选框
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <form>
                                <label>
										<input type="checkbox">拼图框架
									</label>
                            </form>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <form>
                                <label>
		<input type="checkbox">拼图框架
	</label>
                            </form>
                        </xmp>
                    </div>
                    <blockquote class="quote border-yellow doc-quoteyellow">
                        <strong>按钮样式</strong> 单选或多选也可以采用按钮的形式，通过js来控制样式，详情参考"JS组件"的单选多选。</blockquote>
                    <h4 class="doc-title">
                        按钮式单选或多选
                    </h4>
                    <div class="panel doc-demo ">
                        <div class="panel-head doc-ad0">
                            <strong>示例</strong>
                        </div>
                        <div class="panel-body">
                            <div class="button-group radio">
                                <label class="button active">
										<input name="pintuer" value="yes" checked="checked" type="radio">是
									</label>
                                <label class="button">
										<input name="pintuer" value="no" type="radio">否
									</label>
                            </div>
                            <br />
                            <br />
                            <div class="button-group checkbox">
                                <label class="button active">
										<input name="pintuer" value="1" type="checkbox" checked="checked">起步
									</label>
                                <label class="button">
										<input name="pintuer" value="2" type="checkbox">CSS
									</label>
                                <label class="button">
										<input name="pintuer" value="3" type="checkbox">元件
									</label>
                            </div>
                        </div>
                    </div>
                    <h3 class="doc-h3" id="form-status">
                        状态
                    </h3>
                    <p class="doc-readme">
                    </p>
                    <h4 class="doc-title">
                        焦点状态
                    </h4>
                    <div class="doc-input">
                        当选择或输入时的样式效果。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <form>
                                <input type="text" id="doc-input-focus" class="input" size="30" placeholder="焦点状态效果" />
                            </form>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <form>
                                <input type="text" id="doc-input-focus" class="input" size="30" placeholder="焦点状态效果" />
                            </form>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        禁用状态
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <form>
                                <input type="text" size="30" class="input" disabled="disabled" placeholder="禁用状态效果" />
                            </form>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <form>
                                <input type="text" size="30" class="input" disabled="disabled" placeholder="禁用状态效果" />
                            </form>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="form-size">
                        尺寸
                    </h3>
                    <p class="doc-readme">
                        通过input-big,input-small设置不同的大号及小号输入框。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <form>
                                <input type="text" class="input input-big" size="20" placeholder="大号输入框" />
                                <hr class="space">
                                <input type="text" size="20" class="input" placeholder="默认输入框" />
                                <hr class="space">
                                <input type="text" class="input input-small" size="20" placeholder="小号输入框" />
                                <hr class="space">
                                <select class="input input-big">
										<option>大号选择框</option>
									</select>
                                <hr class="space">
                                <select class="input">
										<option>默认选择框</option>
									</select>
                                <hr class="space">
                                <select class="input input-small">
										<option>小号选择框</option>
									</select>
                            </form>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <form>
                                <input type="text" class="input input-big" size="20" placeholder="大号输入框" />
                                <input type="text" size="20" class="input" placeholder="默认输入框" />
                                <input type="text" class="input input-small" size="20" placeholder="小号输入框" />
                                <select class="input input-big">
		<option>大号选择框</option>
	</select>
                                <select class="input">
		<option>默认选择框</option>
	</select>
                                <select class="input input-small">
		<option>小号选择框</option>
	</select>
                            </form>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="form-style">
                        颜色及圆角效果
                    </h3>
                    <p class="doc-readme">
                        给输入框架上.border-(*)及.bg-(*)样式，可以改变其边框及背景颜色；深色背景时需要同时加上.bg-inverse改变文本的颜色。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <form>
                                <input type="text" class="input border-yellow-light bg-yellow-light" placeholder="文本框" />
                                <br />
                                <input type="text" class="input border-green bg-green bg-inverse" placeholder="文本框" />
                            </form>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <form>
                                <input type="text" class="input border-yellow-light bg-yellow-light" placeholder="文本框" />
                                <input type="text" class="input border-green bg-green bg-inverse" placeholder="文本框" />
                            </form>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        直角或圆角
                    </h4>
                    <div class="doc-input">
                        去除圆角请添加.radius-none样式，半圆角添加.radius-rounded样式。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <form>
                                <input type="text" class="input radius-none" placeholder="文本框" />
                                <br />
                                <input type="text" class="input radius-rounded" placeholder="文本框" />
                            </form>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <form>
                                <input type="text" class="input radius-none" placeholder="文本框" />
                                <input type="text" class="input radius-rounded" placeholder="文本框" />
                            </form>
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="button">
                        按钮
                    </h2>
                    <p class="doc-lead">
                    </p>
                    <h3 class="doc-h3" id="button-style">
                        按钮样式
                    </h3>
                    <p class="doc-readme">
                        结合背景.bg-(*)和边框border-(*)的样式，添加至按钮中，可快速改变其颜色及背景。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <button class="button">
									默认</button>
                            <button class="button border-main">
									主色</button>
                            <button class="button border-sub">
									辅色</button>
                            <button class="button border-back">
									背景色</button>
                            <button class="button border-mix">
									融合色</button>
                            <button class="button border-dot">
									点缀色</button>
                            <button class="button border-black">
									黑色</button>
                            <button class="button border-gray">
									灰色</button>
                            <button class="button border-white">
									白色</button>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <button class="button">
	默认</button>
                            <button class="button border-main">
	主色</button>
                            <button class="button border-sub">
	辅色</button>
                            <button class="button border-back">
	背景色</button>
                            <button class="button border-mix">
	融合色</button>
                            <button class="button border-dot">
	点缀色</button>
                            <button class="button border-black">
	黑色</button>
                            <button class="button border-gray">
	灰色</button>
                            <button class="button border-white">
	白色</button>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        背景色按钮
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <button class="button bg">
									默认</button>
                            <button class="button bg-main">
									主色</button>
                            <button class="button bg-sub">
									辅色</button>
                            <button class="button bg-back">
									背景色</button>
                            <button class="button bg-mix">
									融合色</button>
                            <button class="button bg-dot">
									点缀色</button>
                            <button class="button bg-black">
									黑色</button>
                            <button class="button bg-gray">
									灰色</button>
                            <button class="button bg-white">
									白色</button>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <button class="button bg">
	默认</button>
                            <button class="button bg-main">
	主色</button>
                            <button class="button bg-sub">
	辅色</button>
                            <button class="button bg-back">
	背景色</button>
                            <button class="button bg-mix">
	融合色</button>
                            <button class="button bg-dot">
	点缀色</button>
                            <button class="button bg-black">
	黑色</button>
                            <button class="button bg-gray">
	灰色</button>
                            <button class="button bg-white">
	白色</button>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        提示按钮
                    </h4>
                    <div class="doc-input">
                        包含危险、警告、主要、成功等样式。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <button class="button border-red">
									危险</button>
                            <button class="button border-yellow">
									警告</button>
                            <button class="button border-blue">
									主要</button>
                            <button class="button border-green">
									成功</button>
                            <button class="button border-red-light">
									危险</button>
                            <button class="button border-yellow-light">
									警告</button>
                            <button class="button border-blue-light">
									主要</button>
                            <button class="button border-green-light">
									成功</button>
                            <br />
                            <br />
                            <button class="button bg-red">
									危险</button>
                            <button class="button bg-yellow">
									警告</button>
                            <button class="button bg-blue">
									主要</button>
                            <button class="button bg-green">
									成功</button>
                            <button class="button bg-red-light">
									危险</button>
                            <button class="button bg-yellow-light">
									警告</button>
                            <button class="button bg-blue-light">
									主要</button>
                            <button class="button bg-green-light">
									成功</button>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <button class="button border-red">
	危险</button>
                            <button class="button border-yellow">
	警告</button>
                            <button class="button border-blue">
	主要</button>
                            <button class="button border-green">
	成功</button>
                            <button class="button border-red-light">
	危险</button>
                            <button class="button border-yellow-light">
	警告</button>
                            <button class="button border-blue-light">
	主要</button>
                            <button class="button border-green-light">
	成功</button>
                            <button class="button bg-red">
	危险</button>
                            <button class="button bg-yellow">
	警告</button>
                            <button class="button bg-blue">
	主要</button>
                            <button class="button bg-green">
	成功</button>
                            <button class="button bg-red-light">
	危险</button>
                            <button class="button bg-yellow-light">
	警告</button>
                            <button class="button bg-blue-light">
	主要</button>
                            <button class="button bg-green-light">
	成功</button>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        直角和圆角按钮
                    </h4>
                    <div class="doc-input">
                        使用.radius-(*)圆角系列样式，可以改变按钮的圆角形状。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <button class="button bg-main radius-none">
									直角按钮</button>
                            <button class="button bg-sub radius-rounded">
									圆角按钮</button>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <button class="button bg-main radius-none">
	直角按钮</button>
                            <button class="button bg-sub radius-rounded">
	圆角按钮</button>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="button-size">
                        按钮尺寸
                    </h3>
                    <p class="doc-readme">
                        通过button-large,button-big,button-small,button-little设置不同的大小。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <button class="button button-large">
									特大尺寸按钮</button>
                            <br />
                            <br />
                            <button class="button button-big">
									大尺寸按钮</button>
                            <br />
                            <br />
                            <button class="button">
									默认尺寸按钮</button>
                            <br />
                            <br />
                            <button class="button button-small">
									小尺寸按钮</button>
                            <br />
                            <br />
                            <button class="button button-little">
									特小尺寸按钮</button>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <button class="button button-large">
	...</button>
                            <button class="button button-big">
	...</button>
                            <button class="button">
	...</button>
                            <button class="button button-small">
	...</button>
                            <button class="button button-little">
	...</button>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        按钮块
                    </h4>
                    <div class="doc-input">
                        给按钮添加.button-block样式，按钮的宽即为100%，不超过其父元素宽。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <button class="button button-block">
									按钮块效果</button>
                            <br />
                            <button class="button bg-dot button-big button-block">
									按钮块效果</button>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <button class="button button-block">
	...</button>
                            <button class="button bg-dot button-big button-block">
	...</button>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="disabled">
                        禁用效果
                    </h3>
                    <p class="doc-readme">
                        通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <button type="button" class="button border-main" disabled="disabled">
									禁用效果</button>
                            <button type="button" class="button bg-main" disabled="disabled">
									禁用效果</button>
                            <button type="button" class="button " disabled="disabled">
									禁用效果</button>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <button type="button" class="button border-main" disabled="disabled">
	禁用效果</button>
                            <button type="button" class="button bg-main" disabled="disabled">
	禁用效果</button>
                            <button type="button" class="button " disabled="disabled">
	禁用效果</button>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="button-use">
                        可用元素
                    </h3>
                    <p class="doc-readme">
                        按钮样式可以于button,input,a等元素。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <button class="button">
									button按钮效果</button>
                            <input class="button" type="button" value="input按钮效果" />
                            <a class="button" href="#">链接a按钮效果</a>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <button class="button">
	button按钮效果</button>
                            <input class="button" type="button" value="input按钮效果" /> <a class="button" href="#">链接a按钮效果</a>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        带图标的按钮
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <button class="button icon-heart">
									喜欢</button>
                            <button class="button">
									<span class="icon-search"></span>搜索</button>
                            <button class="button">
									<span class="icon-spinner rotate"></span>加载</button>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <button class="button icon-heart">喜欢</button>
                            <button class="button"><span class="icon-search"></span>搜索</button>
                            <button class="button"><span class="icon-spinner rotate"></span>加载</button>
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="list">
                        列表
                    </h2>
                    <p class="doc-lead">
                        包含无序列表、有序列表、内联列表、描述列表等效果。</p>
                    <h3 class="doc-h3" id="ul">
                        无序列表
                    </h3>
                    <p class="doc-readme">
                        顺序不重要的排序</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <ul>
                                <li>拼图前端框架，是一款开源的专业网页前端UI解决方案。</li>
                                <li>是HTML、CSS、Javascrip三者结合的前端框架。</li>
                                <li>配合js效果，提供了拼图的CSS、HTML标准。</li>
                                <li>方便个性化、人性化的前端设计方法。</li>
                                <li>受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
                                    <ul>
                                        <li>拼图前端框架，是一款开源的专业网页前端UI解决方案。</li>
                                        <li>是HTML、CSS、Javascrip三者结合的前端框架。</li>
                                        <li>配合js效果，提供了拼图的CSS、HTML标准。</li>
                                        <li>方便个性化、人性化的前端设计方法。</li>
                                        <li>受到设计师、前端工程师、程序员及网页设计初学者的喜爱。</li>
                                    </ul>
                                </li>
                                <li>拼图框架提供了CSS的重定义、元件样式的预设。</li>
                                <li>拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。</li>
                                <li>丰富了页面效果，同时让前端设计简单化、傻瓜化。</li>
                                <li>任何初学者都可快速建设美观、简洁的页面。</li>
                            </ul>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <ul>
                                <li>...</li>
                            </ul>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="ol">
                        有序列表
                    </h3>
                    <p class="doc-readme">
                        按顺序排列的内容。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <ol>
                                <li>拼图前端框架，是一款开源的专业网页前端UI解决方案。</li>
                                <li>是HTML、CSS、Javascrip三者结合的前端框架。</li>
                                <li>配合js效果，提供了拼图的CSS、HTML标准。</li>
                                <li>方便个性化、人性化的前端设计方法。</li>
                                <li>受到设计师、前端工程师、程序员及网页设计初学者的喜爱。</li>
                                <li>拼图框架提供了CSS的重定义、元件样式的预设。</li>
                                <li>拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。</li>
                                <li>丰富了页面效果，同时让前端设计简单化、傻瓜化。</li>
                                <li>任何初学者都可快速建设美观、简洁的页面。</li>
                            </ol>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <ol>
                                <li>
                                    ...</li>
                            </ol>
                        </xmp>
                    </div>
                    <div class="doc-input">
                        采用中文有序列表，添加样式list-cn，部份浏览器不支持，另外，加上行高样式height-(*)，可以改变列表的行距。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <ol class="list-cn height">
                                <li>拼图前端框架，是一款开源的专业网页前端UI解决方案。</li>
                                <li>是HTML、CSS、Javascrip三者结合的前端框架。</li>
                                <li>配合js效果，提供了拼图的CSS、HTML标准。</li>
                                <li>方便个性化、人性化的前端设计方法。</li>
                                <li>受到设计师、前端工程师、程序员及网页设计初学者的喜爱。</li>
                                <li>拼图框架提供了CSS的重定义、元件样式的预设。</li>
                                <li>拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。</li>
                                <li>丰富了页面效果，同时让前端设计简单化、傻瓜化。</li>
                                <li>任何初学者都可快速建设美观、简洁的页面。</li>
                            </ol>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <ol class="list-cn height">
                                <li>
                                    ...</li>
                            </ol>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        字母排序
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <ol class="list-alpha">
                                <li>拼图前端框架，是一款开源的专业网页前端UI解决方案。</li>
                                <li>是HTML、CSS、Javascrip三者结合的前端框架。</li>
                                <li>配合js效果，提供了拼图的CSS、HTML标准。</li>
                            </ol>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <ol class="list-alpha">
                                <li>
                                    ...</li>
                            </ol>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="unstyle">
                        无样式列表
                    </h3>
                    <p class="doc-readme">
                        添加list-unstyle样式，可以去除列表样式效果。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <ul class="list-unstyle height">
                                <li>拼图前端框架，是一款开源的专业网页前端UI解决方案。</li>
                                <li>是HTML、CSS、Javascrip三者结合的前端框架。</li>
                                <li>配合js效果，提供了拼图的CSS、HTML标准。</li>
                                <li>方便个性化、人性化的前端设计方法。</li>
                                <li>受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
                                    <ul>
                                        <li>拼图前端框架，是一款开源的专业网页前端UI解决方案。</li>
                                        <li>是HTML、CSS、Javascrip三者结合的前端框架。</li>
                                        <li>配合js效果，提供了拼图的CSS、HTML标准。</li>
                                        <li>方便个性化、人性化的前端设计方法。</li>
                                        <li>受到设计师、前端工程师、程序员及网页设计初学者的喜爱。</li>
                                    </ul>
                                </li>
                                <li>拼图框架提供了CSS的重定义、元件样式的预设。</li>
                                <li>拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。</li>
                                <li>丰富了页面效果，同时让前端设计简单化、傻瓜化。</li>
                                <li>任何初学者都可快速建设美观、简洁的页面。</li>
                            </ul>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <ul class="list-unstyle height">
                                <li>...</li>
                            </ul>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="list-inline">
                        内联列表
                    </h3>
                    <p class="doc-readme">
                        通过设置display: inline-block;并添加少量的padding，将所有元素放置于同一列。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <ul class="list-inline">
                                <li>拼图框架</li>
                                <li>起步</li>
                                <li>CSS效果</li>
                                <li>元件</li>
                            </ul>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <ul class="list-inline">
                                <li>...</li>
                            </ul>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="dl">
                        描述
                    </h3>
                    <p class="doc-readme">
                        带有描述内容的列表。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <dl>
                                <dt>拼图框架</dt>
                                <dd>
                                    是一款开源的专业网页前端UI解决方案</dd>
                                <dt>框架应用</dt>
                                <dd>
                                    配合js效果，提供了拼图的CSS、HTML标准。</dd>
                                <dt>广受欢迎</dt>
                                <dd>
                                    受到设计师、前端工程师、程序员及网页设计初学者的喜爱。</dd>
                            </dl>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <dl>
                                <dt>...</dt>
                                <dd>
                                    ...</dd>
                            </dl>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        水平排列的描述
                    </h4>
                    <div class="doc-input">
                        添加样式 dl-inline</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <dl class="dl-inline clearfix">
                                <dt>拼图前端框架</dt>
                                <dd>
                                    是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。</dd>
                                <dt>学习使用</dt>
                                <dd>
                                    拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。</dd>
                            </dl>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <dl class="dl-inline clearfix">
                                <dt>...</dt>
                                <dd>
                                    ...</dd>
                            </dl>
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="table">
                        表格
                    </h2>
                    <p class="doc-lead">
                    </p>

                    <h3 class="doc-h3" id="table-list">
                        表格列表
                    </h3>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="table-responsive">
                                <table class="table">
                                    <tr>
                                        <th>起步</th>
                                        <th>CSS</th>
                                        <th>元件</th>
                                        <th>模块</th>
                                    </tr>
                                    <tr>
                                        <td>下载前端框架</td>
                                        <td>文本</td>
                                        <td>网格系统</td>
                                        <td>框架</td>
                                    </tr>
                                    <tr>
                                        <td>框架包含的文件</td>
                                        <td>图片</td>
                                        <td>图标</td>
                                        <td>头部</td>
                                    </tr>
                                    <tr>
                                        <td>基本页面</td>
                                        <td>水平线</td>
                                        <td>标签</td>
                                        <td>Banner</td>
                                    </tr>
                                    <tr>
                                        <td>响应式布局</td>
                                        <td>按钮</td>
                                        <td>徽章</td>
                                        <td>导航</td>
                                    </tr>
                                    <tr>
                                        <td>浏览器支持</td>
                                        <td>列表</td>
                                        <td>进度条</td>
                                        <td>面包屑</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <table class="table">
                                <tr>
                                    <th>
                                        ...
                                    </th>
                                </tr>
                                <tr>
                                    <td>
                                        ...
                                    </td>
                                </tr>
                            </table>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="table-striped">
                        条纹表格
                    </h3>
                    <p class="doc-readme">
                        添加table-striped样式，表格每隔行增加背景，IE8以下不支持此效果。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <tr>
                                        <th>
                                            起步
                                        </th>
                                        <th>
                                            CSS
                                        </th>
                                        <th>
                                            元件
                                        </th>
                                        <th>
                                            模块
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            下载前端框架
                                        </td>
                                        <td>
                                            文本
                                        </td>
                                        <td>
                                            网格系统
                                        </td>
                                        <td>
                                            框架
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            框架包含的文件
                                        </td>
                                        <td>
                                            图片
                                        </td>
                                        <td>
                                            图标
                                        </td>
                                        <td>
                                            头部
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            基本页面
                                        </td>
                                        <td>
                                            水平线
                                        </td>
                                        <td>
                                            标签
                                        </td>
                                        <td>
                                            Banner
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            响应式布局
                                        </td>
                                        <td>
                                            按钮
                                        </td>
                                        <td>
                                            徽章
                                        </td>
                                        <td>
                                            导航
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            浏览器支持
                                        </td>
                                        <td>
                                            列表
                                        </td>
                                        <td>
                                            进度条
                                        </td>
                                        <td>
                                            面包屑
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <table class="table table-striped">
                                <tr>
                                    <th>
                                        ...
                                    </th>
                                </tr>
                                <tr>
                                    <td>
                                        ...
                                    </td>
                                </tr>
                            </table>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="table-bordered">
                        带边框的表格
                    </h3>
                    <p class="doc-readme">
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <tr>
                                        <th>
                                            起步
                                        </th>
                                        <th>
                                            CSS
                                        </th>
                                        <th>
                                            元件
                                        </th>
                                        <th>
                                            模块
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            下载前端框架
                                        </td>
                                        <td>
                                            文本
                                        </td>
                                        <td>
                                            网格系统
                                        </td>
                                        <td>
                                            框架
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            框架包含的文件
                                        </td>
                                        <td>
                                            图片
                                        </td>
                                        <td>
                                            图标
                                        </td>
                                        <td>
                                            头部
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            基本页面
                                        </td>
                                        <td>
                                            水平线
                                        </td>
                                        <td>
                                            标签
                                        </td>
                                        <td>
                                            Banner
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            响应式布局
                                        </td>
                                        <td>
                                            按钮
                                        </td>
                                        <td>
                                            徽章
                                        </td>
                                        <td>
                                            导航
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            浏览器支持
                                        </td>
                                        <td>
                                            列表
                                        </td>
                                        <td>
                                            进度条
                                        </td>
                                        <td>
                                            面包屑
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <table class="table table-bordered">
                                <tr>
                                    <th>
                                        ...
                                    </th>
                                </tr>
                                <tr>
                                    <td>
                                        ...
                                    </td>
                                </tr>
                            </table>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="table-list">
                        李波新增：表格列表2
                    </h3>
					<p class="doc-readme">
                        居中 center juzhong
居左 left juzuo
居右 right juyou
td水平居中 middle</p>
                    <p class="doc-readme">
                        加表格添加.table01样式，可以加鼠标悬停 table-hover。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="table-responsive">
                                <table class="table01">
                                    <tr class="hd">
                                        <td>起步</td>
                                        <td>CSS</td>
                                        <td>元件</td>
                                        <td>模块</td>
                                    </tr>
                                    <tr>
                                        <td>下载前端框架</td>
                                        <td>文本</td>
                                        <td>网格系统</td>
                                        <td>框架</td>
                                    </tr>
                                    <tr>
                                        <td>框架包含的文件</td>
                                        <td>图片</td>
                                        <td>图标</td>
                                        <td>头部</td>
                                    </tr>
                                    <tr>
                                        <td>基本页面</td>
                                        <td>水平线</td>
                                        <td>标签</td>
                                        <td>Banner</td>
                                    </tr>
                                    <tr>
                                        <td>响应式布局</td>
                                        <td>按钮</td>
                                        <td>徽章</td>
                                        <td>导航</td>
                                    </tr>
                                    <tr>
                                        <td>浏览器支持</td>
                                        <td>列表</td>
                                        <td>进度条</td>
                                        <td>面包屑</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <table class="table01">
                                <tr class="hd">
                                    <td>
                                        ...
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        ...
                                    </td>
                                </tr>
                            </table>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="table-hover">
                        鼠标悬停
                    </h3>
                    <p class="doc-readme">
                        鼠标悬停时显示当前行的背景色。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <tr>
                                        <th>
                                            起步
                                        </th>
                                        <th>
                                            CSS
                                        </th>
                                        <th>
                                            元件
                                        </th>
                                        <th>
                                            模块
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            下载前端框架
                                        </td>
                                        <td>
                                            文本
                                        </td>
                                        <td>
                                            网格系统
                                        </td>
                                        <td>
                                            框架
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            框架包含的文件
                                        </td>
                                        <td>
                                            图片
                                        </td>
                                        <td>
                                            图标
                                        </td>
                                        <td>
                                            头部
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            基本页面
                                        </td>
                                        <td>
                                            水平线
                                        </td>
                                        <td>
                                            标签
                                        </td>
                                        <td>
                                            Banner
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            响应式布局
                                        </td>
                                        <td>
                                            按钮
                                        </td>
                                        <td>
                                            徽章
                                        </td>
                                        <td>
                                            导航
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            浏览器支持
                                        </td>
                                        <td>
                                            列表
                                        </td>
                                        <td>
                                            进度条
                                        </td>
                                        <td>
                                            面包屑
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <table class="table table-hover">
                                <tr>
                                    <th>
                                        ...
                                    </th>
                                </tr>
                                <tr>
                                    <td>
                                        ...
                                    </td>
                                </tr>
                            </table>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="table-condensed">
                        紧缩表格
                    </h3>
                    <p class="doc-readme">
                        添加.table-condensed样式，减少表格间距。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="table-responsive">
                                <table class="table table-condensed">
                                    <tr>
                                        <th>
                                            起步
                                        </th>
                                        <th>
                                            CSS
                                        </th>
                                        <th>
                                            元件
                                        </th>
                                        <th>
                                            模块
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            下载前端框架
                                        </td>
                                        <td>
                                            文本
                                        </td>
                                        <td>
                                            网格系统
                                        </td>
                                        <td>
                                            框架
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            框架包含的文件
                                        </td>
                                        <td>
                                            图片
                                        </td>
                                        <td>
                                            图标
                                        </td>
                                        <td>
                                            头部
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            基本页面
                                        </td>
                                        <td>
                                            水平线
                                        </td>
                                        <td>
                                            标签
                                        </td>
                                        <td>
                                            Banner
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            响应式布局
                                        </td>
                                        <td>
                                            按钮
                                        </td>
                                        <td>
                                            徽章
                                        </td>
                                        <td>
                                            导航
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            浏览器支持
                                        </td>
                                        <td>
                                            列表
                                        </td>
                                        <td>
                                            进度条
                                        </td>
                                        <td>
                                            面包屑
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <table class="table table-condensed">
                                <tr>
                                    <th>
                                        ...
                                    </th>
                                </tr>
                                <tr>
                                    <td>
                                        ...
                                    </td>
                                </tr>
                            </table>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="table-bg">
                        单元格背景
                    </h3>
                    <p class="doc-readme">
                        含当前.current，红.red，黄.yellow，蓝.blue，绿.green五种色彩。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="table-responsive">
                                <table class="table">
                                    <tr class="current">
                                        <th>
                                            起步
                                        </th>
                                        <th>
                                            CSS
                                        </th>
                                        <th>
                                            元件
                                        </th>
                                        <th>
                                            模块
                                        </th>
                                        <th>
                                            JS组件
                                        </th>
                                    </tr>
                                    <tr>
                                        <td class="current">
                                            下载前端框架
                                        </td>
                                        <td>
                                            文本
                                        </td>
                                        <td>
                                            网格系统
                                        </td>
                                        <td>
                                            框架
                                        </td>
                                        <td>
                                            概述
                                        </td>
                                    </tr>
                                    <tr class="red">
                                        <td>
                                            框架包含的文件
                                        </td>
                                        <td>
                                            图片
                                        </td>
                                        <td>
                                            图标
                                        </td>
                                        <td>
                                            头部
                                        </td>
                                        <td>
                                            窗口工具
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            基本页面
                                        </td>
                                        <td class="red">
                                            水平线
                                        </td>
                                        <td>
                                            标签
                                        </td>
                                        <td>
                                            Banner
                                        </td>
                                        <td>
                                            选项标签
                                        </td>
                                    </tr>
                                    <tr class="yellow">
                                        <td>
                                            响应式布局
                                        </td>
                                        <td>
                                            按钮
                                        </td>
                                        <td>
                                            徽章
                                        </td>
                                        <td>
                                            导航
                                        </td>
                                        <td>
                                            对话框
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            浏览器支持
                                        </td>
                                        <td>
                                            列表
                                        </td>
                                        <td class="yellow">
                                            进度条
                                        </td>
                                        <td>
                                            面包屑
                                        </td>
                                        <td>
                                            提示
                                        </td>
                                    </tr>
                                    <tr class="blue">
                                        <td>
                                            框架包含的文件
                                        </td>
                                        <td>
                                            图片
                                        </td>
                                        <td>
                                            图标
                                        </td>
                                        <td>
                                            头部
                                        </td>
                                        <td>
                                            警告框
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            基本页面
                                        </td>
                                        <td>
                                            水平线
                                        </td>
                                        <td>
                                            标签
                                        </td>
                                        <td class="blue">
                                            Banner
                                        </td>
                                        <td>
                                            表单验证
                                        </td>
                                    </tr>
                                    <tr class="green">
                                        <td>
                                            框架包含的文件
                                        </td>
                                        <td>
                                            图片
                                        </td>
                                        <td>
                                            图标
                                        </td>
                                        <td>
                                            头部
                                        </td>
                                        <td>
                                            警告框
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            基本页面
                                        </td>
                                        <td>
                                            水平线
                                        </td>
                                        <td>
                                            标签
                                        </td>
                                        <td>
                                            Banner
                                        </td>
                                        <td class="green">
                                            表单验证
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <table>
                                <!--行-->
                                <tr class="current">
                                    <td>
                                        ...
                                    </td>
                                </tr>
                                <tr class="red">
                                    <td>
                                        ...
                                    </td>
                                </tr>
                                <tr class="yellow">
                                    <td>
                                        ...
                                    </td>
                                </tr>
                                <tr class="blue">
                                    <td>
                                        ...
                                    </td>
                                </tr>
                                <tr class="green">
                                    <td>
                                        ...
                                    </td>
                                </tr>
                                <!--单元格-->
                                <tr>
                                    <td class="current">
                                        >...
                                    </td>
                                </tr>
                                <tr>
                                    <td class="red">
                                        ...
                                    </td>
                                </tr>
                                <tr>
                                    <td class="yellow">
                                        ...
                                    </td>
                                </tr>
                                <tr>
                                    <td class="blue">
                                        ...
                                    </td>
                                </tr>
                                <tr>
                                    <td class="green">
                                        ...
                                    </td>
                                </tr>
                            </table>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="table-responsive">
                        响应式表格-默认
                    </h3>
                    <p class="doc-readme">
                        将任何.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <tr>
                                        <th>
                                            起步
                                        </th>
                                        <th>
                                            CSS
                                        </th>
                                        <th>
                                            元件
                                        </th>
                                        <th>
                                            模块
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            下载前端框架
                                        </td>
                                        <td>
                                            文本
                                        </td>
                                        <td>
                                            网格系统
                                        </td>
                                        <td>
                                            框架
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            框架包含的文件
                                        </td>
                                        <td>
                                            图片
                                        </td>
                                        <td>
                                            图标
                                        </td>
                                        <td>
                                            头部
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            基本页面
                                        </td>
                                        <td>
                                            水平线
                                        </td>
                                        <td>
                                            标签
                                        </td>
                                        <td>
                                            Banner
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            响应式布局
                                        </td>
                                        <td>
                                            按钮
                                        </td>
                                        <td>
                                            徽章
                                        </td>
                                        <td>
                                            导航
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            浏览器支持
                                        </td>
                                        <td>
                                            列表
                                        </td>
                                        <td>
                                            进度条
                                        </td>
                                        <td>
                                            面包屑
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="table-responsive">
                                <table class="table">
                                    <tr>
                                        <th>
                                            ...
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            ...
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h3 class="doc-h3" id="table-responsive">
                        响应式表格-移动端纵向显示&nbsp;<span class="tag bg-yellow">新增</span>
                    </h3>
                    <p class="doc-readme">
                        将任何.table包裹在.table-responsive-y 中即可创建响应式表格，其会在小屏幕设备上（小于800px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失，并且不再纵向排列。 因，响应式表格-移动端纵向显示比较特殊，请严格按照示例中的方式进行编码。
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <div class="table-responsive-y">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>
                                                起步
                                            </th>
                                            <th>
                                                CSS
                                            </th>
                                            <th>
                                                元件
                                            </th>
                                            <th>
                                                模块
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td data-title="起步">
                                                下载前端框架
                                            </td>
                                            <td data-title="CSS">
                                                文本
                                            </td>
                                            <td data-title="元件">
                                                网格系统
                                            </td>
                                            <td data-title="模块">
                                                框架
                                            </td>
                                        </tr>
                                        <tr>
                                            <td data-title="起步">
                                                框架包含的文件
                                            </td>
                                            <td data-title="CSS">
                                                图片
                                            </td>
                                            <td data-title="元件">
                                                图标
                                            </td>
                                            <td data-title="模块">
                                                头部
                                            </td>
                                        </tr>
                                        <tr>
                                            <td data-title="起步">
                                                基本页面
                                            </td>
                                            <td data-title="CSS">
                                                水平线
                                            </td>
                                            <td data-title="元件">
                                                标签
                                            </td>
                                            <td data-title="模块">
                                                Banner
                                            </td>
                                        </tr>
                                        <tr>
                                            <td data-title="起步">
                                                响应式布局
                                            </td>
                                            <td data-title="CSS">
                                                按钮
                                            </td>
                                            <td data-title="元件">
                                                徽章
                                            </td>
                                            <td data-title="模块">
                                                导航
                                            </td>
                                        </tr>
                                        <tr>
                                            <td data-title="起步">
                                                浏览器支持
                                            </td>
                                            <td data-title="CSS">
                                                列表
                                            </td>
                                            <td data-title="元件">
                                                进度条
                                            </td>
                                            <td data-title="模块">
                                                面包屑
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="table-responsive-y">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>
                                                起步
                                            </th>
                                            <th>
                                                CSS
                                            </th>
                                            <th>
                                                元件
                                            </th>
                                            <th>
                                                模块
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td data-title="起步">
                                                下载前端框架
                                            </td>
                                            <td data-title="CSS">
                                                文本
                                            </td>
                                            <td data-title="元件">
                                                网格系统
                                            </td>
                                            <td data-title="模块">
                                                框架
                                            </td>
                                        </tr>
                                        <tr>
                                            <td data-title="起步">
                                                框架包含的文件
                                            </td>
                                            <td data-title="CSS">
                                                图片
                                            </td>
                                            <td data-title="元件">
                                                图标
                                            </td>
                                            <td data-title="模块">
                                                头部
                                            </td>
                                        </tr>
                                        <tr>
                                            <td data-title="起步">
                                                基本页面
                                            </td>
                                            <td data-title="CSS">
                                                水平线
                                            </td>
                                            <td data-title="元件">
                                                标签
                                            </td>
                                            <td data-title="模块">
                                                Banner
                                            </td>
                                        </tr>
                                        <tr>
                                            <td data-title="起步">
                                                响应式布局
                                            </td>
                                            <td data-title="CSS">
                                                按钮
                                            </td>
                                            <td data-title="元件">
                                                徽章
                                            </td>
                                            <td data-title="模块">
                                                导航
                                            </td>
                                        </tr>
                                        <tr>
                                            <td data-title="起步">
                                                浏览器支持
                                            </td>
                                            <td data-title="CSS">
                                                列表
                                            </td>
                                            <td data-title="元件">
                                                进度条
                                            </td>
                                            <td data-title="模块">
                                                面包屑
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </xmp>
                    </div>
                    <br>
                    <br>
                    <h2 class="doc-h2" id="quote">
                        引用
                    </h2>
                    <p class="doc-lead">
                    </p>
                    <h3 class="doc-h3" id="quote-style">
                        引用样式
                    </h3>
                    <p class="doc-readme">
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <blockquote>
                                <p>
                                    拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。</p>
                            </blockquote>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <blockquote>
                                <p>
                                    ...</p>
                            </blockquote>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        配合代码显示
                    </h4>
                    <div class="doc-input">
                        增加strong及smll标签，有不同的样式效果。</div>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <blockquote>
                                <strong>拼图框架</strong>
                                <p>
                                    拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。</p>
                                <small>它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法。</small>
                            </blockquote>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <blockquote>
                                <strong>...</strong>
                                <p>
                                    ...</p>
                                <small>...</small>
                            </blockquote>
                        </xmp>
                    </div>
                    <h4 class="doc-title">
                        向右对齐效果
                    </h4>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <blockquote class="quote-floatright">
                                <strong>拼图框架</strong>
                                <p>
                                    拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。</p>
                                <small>它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法。</small>
                            </blockquote>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <blockquote class="quote-floatright">
                                <strong>...</strong>
                                <p>
                                    ...</p>
                                <small>...</small>
                            </blockquote>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="quote-color">
                        引用颜色
                    </h3>
                    <p class="doc-readme">
                        使用.border-(*)系列样式，可以立即改变引用的边框颜色。</p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="view-body">
                            <blockquote class="border-main">
                                <strong>拼图前端框架</strong>
                                <p>
                                    拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。</p>
                            </blockquote>
                            <br />
                            <blockquote class="border-sub quote-floatright">
                                <strong>拼图前端框架</strong>
                                <p>
                                    拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。</p>
                            </blockquote>
                            <br />
                            <blockquote class="border-mix">
                                <strong>拼图前端框架</strong>
                                <p>
                                    拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。</p>
                            </blockquote>
                            <br />
                            <blockquote class="border-back quote-floatright">
                                <strong>拼图前端框架</strong>
                                <p>
                                    拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。</p>
                            </blockquote>
                            <br />
                            <blockquote class="border-dot">
                                <strong>拼图前端框架</strong>
                                <p>
                                    拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。</p>
                            </blockquote>
                        </div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <blockquote class="border-main">
                                <strong>...</strong>
                                <p>
                                    ...</p>
                            </blockquote>
                            <blockquote class="border-main quote-floatright">
                                <strong>...</strong>
                                <p>
                                    ...</p>
                            </blockquote>
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="float">
                        浮动
                    </h2>
                    <p class="doc-lead">
                    </p>
                    <h3 class="doc-h3" id="float-set">
                        设置浮动
                    </h3>
                    <p class="doc-readme">
                        通过这两个class让页面元素左右浮动。 !important被用来避免某些问题。</p>
                    <div class="doc-code">
                        <xmp>
                            <div class="float-left">
                                ...</div>
                            <div class="float-right">
                                ...</div>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="float-clear">
                        清除浮动
                    </h3>
                    <p class="doc-readme">
                        使用.clearfix清除任意页面元素的浮动。</p>
                    <div class="doc-code">
                        <xmp>
                            <div class="clearfix">
                                ...</div>
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="display">
                        显示隐藏
                    </h2>
                    <p class="doc-lead">
                    </p>
                    <h3 class="doc-h3" id="showhidden">
                        显示和隐藏
                    </h3>
                    <p class="doc-readme">
                        通过.show 和 .hidden可以强制显示或隐藏元素。这两个class使用了!important以避免冲突，原因和快速浮动类似。</p>
                    <div class="doc-code">
                        <xmp>
                            <div class="show">
                                ...</div>
                            <div class="hidden">
                                ...</div>
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="print-set">
                        打印显示隐藏
                    </h3>
                    <p class="doc-readme">
                        使用下面的class可以针对打印机隐藏或显示某些内容</p>
                    <div class="doc-code">
                        <xmp>
                            <div class="print-show">
                                ...</div>
                            <div class="print-hidden">
                                ...</div>
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="opacity">
                        透明<span class="tag bg-yellow">新增</span>
                    </h2>
                    <p class="doc-lead">
                        快速设置层、文字、图片等透明。
                    </p>
                    <h3 class="doc-h3" id="opacity-bg">
                        背景透明
                    </h3>
                    <p class="doc-readme">
                        通过.opacity设置背景是否透明，.opacity 默认，完全透明/.opacity-small 透明20%/.opacity-middle 透明一半/.opacity-big 透明80%/.opacity-none 不透明（用户重置已设置透明度的样式）。
                    </p>
                    <div class="doc-demoview doc-viewad0">
                        <div class="bg-green opacity">完全透明</div>
                        <div class="bg-green opacity-small">透明20%</div>
                        <div class="bg-green opacity-middle">透明一半</div>
                        <div class="bg-green opacity-big">透明80%</div>
                        <div class="bg-green opacity-none">不透明</div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="bg-green opacity">完全透明</div>
                            <div class="bg-green opacity-small">透明20%</div>
                            <div class="bg-green opacity-middle">透明一半</div>
                            <div class="bg-green opacity-big">透明80%</div>
                            <div class="bg-green opacity-none">不透明</div>
                            <!--其他透明度需自行定义，复制如下代码，更改opacity=后的数值即可-->
                            .opacity-名称自拟{filter:alpha(opacity=100);-moz-opacity:1.0;-khtml-opacity: 1.0;opacity: 1.0;}
                        </xmp>
                    </div>
                    <h3 class="doc-h3" id="opacity-font">
                        文字透明
                    </h3>
                    <p class="doc-readme">
                        通过.opacity设置背景是否透明，.opacity 默认，完全透明/.opacity-small 透明20%/.opacity-middle 透明一半/.opacity-big 透明80%/.opacity-none 不透明（用户重置已设置透明度的样式）。
                    </p>
                    <div class="doc-demoview doc-viewad0 ">
                        <div class="bg-green opacity">完全透明</div>
                        <div class="text-green opacity-small">透明20%</div>
                        <div class="text-green opacity-middle">透明一半</div>
                        <div class="text-green opacity-big">透明80%</div>
                        <div class="text-green opacity-none">不透明</div>
                    </div>
                    <div class="doc-democode doc-codead0 ">
                        <xmp>
                            <div class="bg-green opacity">完全透明</div>
                            <div class="text-green opacity-small">透明20%</div>
                            <div class="text-green opacity-middle">透明一半</div>
                            <div class="text-green opacity-big">透明80%</div>
                            <div class="text-green opacity-none">不透明</div>
                            <!--其他透明度需自行定义，复制如下代码，更改opacity=后的数值即可-->
                            .opacity-名称自拟{filter:alpha(opacity=100);-moz-opacity:1.0;-khtml-opacity: 1.0;opacity: 1.0;}
                        </xmp>
                    </div>
                    <br />
                    <br />
                    <br />
                    <br />
                </div>
                <!--list.end-->
            </div>
            <div class="hidden-l hidden-s xm3 xb3">
                <div class="sidebar doc-sidebar fadein-left">
                    <ul class="sidenav nav spy fixed" data-offset-fixed="270" data-offset-spy="160">
                        <li><a href="#overview">概述</a>
                            <ul>
                                <li><a href="#html5">HTML5文档</a> </li>
                                <li><a href="#mobile">移动设备优先</a> </li>
                                <li><a href="#container">容器</a> </li>
                                <li><a href="#advise">建议的文档模版</a> </li>
                            </ul>
                        </li>
                        <li><a href="#text">文本</a>
                            <ul>
                                <li><a href="#title">标题文本</a> </li>
                                <li><a href="#p">段落文本</a> </li>
                                <li><a href="#strong">强调文本</a> </li>
                                <li><a href="#text-link">链接文本</a> </li>
                                <li><a href="#text-align">文本对齐</a> </li>
                                <li><a href="#text-size">文本字号</a> </li>
                                <li><a href="#text-color">文本颜色</a> </li>
                                <li><a href="#text-height">文本行距</a> </li>
                                <li><a href="#text-break">文本换行</a> </li>
                                <li><a href="#text-more">文本截断</a> </li>
                            </ul>
                        </li>
                        <li><a href="#color">颜色</a>
                            <ul>
                                <li><a href="#color-default">自带颜色</a> </li>
                                <li><a href="#color-table">自定义颜色</a> </li>
                                <li><a href="#color-list">配色方案</a> </li>
                            </ul>
                        </li>
                        <li><a href="#bgborder">背景、边框、圆角、阴影</a>
                            <ul>
                                <li><a href="#bg-color">背景色</a> </li>
                                <li><a href="#bg-notice">提示背景</a> </li>
                                <li><a href="#border">边框颜色</a> </li>
                                <li><a href="#border-style">边框大小、位置及样式</a> </li>
                                <li><a href="#bg-radius">圆角</a> </li>
                                <li><a href="#box-shadow">阴影</a> </li>
                            </ul>
                        </li>
                        <li><a href="#cssbox">边界、填充</a>
                            <ul>
                                <li><a href="#boxmodel">盒子模型</a> </li>
                                <li><a href="#border-place">边界位置</a> </li>
                                <li><a href="#margin-size">边界大小</a> </li>
                                <li><a href="#padding-place">填充位置</a> </li>
                                <li><a href="#padding-size">填充大小</a> </li>
                                <li><a href="#box-demo">盒子示例</a> </li>
                            </ul>
                        </li>
                        <li><a href="#animation">CSS动画</a>
                            <ul>
                                <li><a href="#fade">淡入淡出</a> </li>
                                <li><a href="#stress">强调动画</a> </li>
                                <li><a href="#rotate">旋转</a> </li>
                            </ul>
                        </li>
                        <li><a href="#hr">水平线</a>
                            <ul>
                                <li><a href="#hr-line">水平线</a> </li>
                                <li><a href="#hr-color">颜色</a> </li>
                            </ul>
                        </li>
                        <li><a href="#image">图片</a>
                            <ul>
                                <li><a href="#image-style">图片样式</a> </li>
                                <li><a href="#img-responsive">响应式图片</a> </li>
                            </ul>
                        </li>
                        <li><a href="#form">表单</a>
                            <ul>
                                <li><a href="#input">输入框</a> </li>
                                <li><a href="#file">浏览文件</a> </li>
                                <li><a href="#select">下拉菜单</a> </li>
                                <li><a href="#radio-checkbox">单选多选</a> </li>
                                <li><a href="#form-status">状态</a> </li>
                                <li><a href="#form-size">尺寸</a> </li>
                                <li><a href="#form-style">颜色及圆角效果</a> </li>
                            </ul>
                        </li>
                        <li><a href="#button">按钮</a>
                            <ul>
                                <li><a href="#button-style">按钮样式</a> </li>
                                <li><a href="#button-size">按钮尺寸</a> </li>
                                <li><a href="#disabled">禁用效果</a> </li>
                                <li><a href="#button-use">可用元素</a> </li>
                            </ul>
                        </li>
                        <li><a href="#list">列表</a>
                            <ul>
                                <li><a href="#ul">无序列表</a> </li>
                                <li><a href="#ol">有序列表</a> </li>
                                <li><a href="#unstyle">无样式列表</a> </li>
                                <li><a href="#list-inline">内联列表</a> </li>
                                <li><a href="#dl">描述</a> </li>
                            </ul>
                        </li>
                        <li><a href="#table">表格</a>
                            <ul>
                                <li><a href="#table-list">表格列表</a> </li>
                                <li><a href="#table-striped">条纹表格</a> </li>
                                <li><a href="#table-bordered">带边框的表格</a> </li>
                                <li><a href="#table-hover">鼠标悬停</a> </li>
                                <li><a href="#table-condensed">紧缩表格</a> </li>
                                <li><a href="#table-bg">单元格背景</a> </li>
                                <li><a href="#table-responsive">响应式表格</a> </li>
                            </ul>
                        </li>
                        <li><a href="#quote">引用</a>
                            <ul>
                                <li><a href="#quote-style">引用样式</a> </li>
                                <li><a href="#quote-color">引用颜色</a> </li>
                            </ul>
                        </li>
                        <li><a href="#float">浮动</a>
                            <ul>
                                <li><a href="#float-set">设置浮动</a> </li>
                                <li><a href="#float-clear">清除浮动</a> </li>
                            </ul>
                        </li>
                        <li><a href="#display">显示隐藏</a>
                            <ul>
                                <li><a href="#showhidden">显示和隐藏</a> </li>
                                <li><a href="#print-set">打印显示隐藏</a> </li>
                            </ul>
                        </li>
                        <li><a href="#opacity">透明</a>
                            <ul>
                                <li><a href="#opacity-bg">背景透明</a> </li>
                                <li><a href="#opacity-font">文字透明</a> </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container doc-footer">
        版权所有 &copy; <a href="">Pintuer.com</a> All Rights Reserved.</div>
    <div class="doc-backtop win-backtop icon-arrow-circle-up">
    </div>
    <script src="plugins/layer/layer.js"></script>
    <script src="plugins/zclip/jquery.zclip.min.js"></script>
    <script src="plugins/site.js"></script>
</body>

</html>